如何在JavaScript中编写简单的异步函数

Question

我想调用一个需要很长时间（5秒）才能完成的javascript函数，而不会冻结客户端的浏览器。 他们单击按钮开始操作，然后应在操作完成时通知他们。 目前我写了类似

$(document).ready(function(){
    $('#tokenbutton').click(function(){

        // IMMEDIATE EFFECT
        $('#tokenbutton').attr("disabled",true).val("Computing...");

        var callback = function(resultsFromExpensiveOperation){
            // CALLBACK EFFECTS
            $('#tokenbutton').val("Token computed");
            $('#submitbutton').attr("disabled",false);
            // ...
        };                  

        // FREEZES BROWSER
        doExpensiveOperation(callback);
    });
});

和

doExpensiveOperation = function(callback){
    // ...
    //var results = ...

    callback(results);
};

但这会在我运行浏览器时冻结它。 如何更改它，以免冻结浏览器？

Answer 1

用例

创建一个非Ajax单独的进程，该进程将数据返回给回调。

解

要求

浏览器必须：

• 支持HTML5
• 支持网络工作者

结构体

使用逻辑为单独的线程处理创建单独的文件。 该文件必须包含以下代码：

postMessage( //data )

码

if(typeof(Worker) === "function") {
    var worker = new Worker(//uri to js file);
    worker.onmessage = function(event){
        // my call back.
    };
}

Answer 2

没有真正的异步javascript，因此没有多线程或类似的东西。 有一种方法可以使长时间运行的功能在某些情况下不会冻结浏览器。

您可以使用setInterval或setTimeout函数一次执行长时间运行的任务的小部分，因此，每个位花费一秒钟的时间，然后ui再次响应一秒钟，直到下一位运行。 这在功能上使ui保持响应状态，并且不会在代码处理上增加太多时间（如果有的话）。 例如。

长时间运行的代码

function doSomething(){
   for(var x = 0; x < 10000; x++){
      // do something 
   }
}
// doing it like this could take forever and lock up the browser

分解代码

var total = 0;
setTimeout(doSomething, 4);

function doSomething(){

     for(total = total; total + 100 < 100; total++){
        // do something 
     }
     if(total < 10000){
        setTimeout(doSomething, 4);
     }
}
// doing it like this stops the browser from freezing but does not save any time.

有几件事，我将4ms的时间放入setTimout中，因为这实际上是js的最低值，即使您将其设置为1，它的默认值为4。

我使用setTimeout模式而不是setInterval来防止下一个间隔在前一个间隔完成之前运行。

最后，这种模式并不适用于所有情况。 它最适合循环和基于序列的操作。

希望能帮助到你