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);
}

恐慌值是由按钮设置的，问题是在循环期间（有效）我​​无法与页面交互。

我做错了什么？

谢谢

编辑：

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（强调）：

异步

默认：真

默认情况下，所有请求都是异步发送的（即默认设置为 true）。如果您需要同步请求，请将此选项设置为 false。跨域请求和 dataType: "jsonp" 请求不支持同步操作。 请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

可能的解决方案：

• 在一个 JSON 对象中搭载您的数据，然后只发送一个 $.ajax 请求。如果可能，请使用async=true。