JavaScript for 循环导致 UI 无响应

Question

我正在制作一个邮件列表脚本，它利用 ajax (async=false) 分块发送电子邮件。

基本上循环是这样的:

var i = 0;
for(i;i<num_rows;i=i+mxt){
    if($("#panic").val()=='1'){
        break;
    }
    perc = (i*100)/num_rows;
    startThread(i,perc);
}

panic 值是通过按钮设置的，问题是在周期(有效)期间我无法与页面交互。

我做错了什么？

谢谢

编辑:

function startThread(i,perc){
l_a = i;
l_b = mxt;

headers = '&mail_from='+mail_from+'&mail_from_name='+mail_from_name+'&mail_subject='+mail_subject;

$.ajax({  
    type: "POST", url: "ajax/thread.php", data: "l_a="+l_a+"&l_b="+l_b+headers, 
    success: function(html){ $("#progressbar").progressbar({value: perc}); },
    async: false
 });
}

Answer 1

您的 startThread() 函数名称具有误导性，因为 Web 浏览器中的 JavaScript 不仅是单线程的，而且与页面渲染共享同一线程。

由于您使用 async=false，$.ajax 调用将成为阻塞函数，这会阻塞页面渲染线程，导致 UI 无响应。

引用jQuery documentation (强调):

async

Default: true

By default, all requests are sent asynchronous (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

可能的解决方案:

• 将您的数据承载在一个 JSON 对象中，并仅发送一个 $.ajax 请求。如果可能，请使用async=true。