Question

我有一个执行长任务的功能。我想创建一个能够通知调用者进度的函数。最终，我想用当前进度更新UI。

这样的事情：

function myLongMethod(progressCallback)
{
    for(var i = 0 ... )
    {
        progressCallback(i) ;
    }

}

这可行，但UI上的更新并不顺畅。有没有更好的办法？我更喜欢使用deferred.notify（）的jquery Deferred对象。有什么想法吗？

Answer 1

你的代码很好。你有另一个问题。 Javscript总是在UI线程上运行。您的操作正在阻止此线程（浏览器），您将看到一些阻止浏览器窗口。幸运的是，在现代浏览器中实现了一种名为web workers的解决方法。这很简单，只需在主脚本中调用另一个脚本然后执行：

var w = new Worker("another_script.js");

如果您的工作人员准备就绪，您可以通过向工作人员添加事件列表器来对结果做出反应：

w.onmessage = function(event) {
  //do something
}

使用此模式时，您的UI未阻止。您甚至可以从Web worker返回数据并将脚本包含在其中。您可以找到更多详细信息here和here，这是一个很好的入门教程。

Answer 2

您好，您可以将缓动效果应用于您的UI以获得平滑度，并且我提供以下代码可能会对您有所帮助

var oldProgress = 0;
var uiUpdater = null;
function updateUI(newProgress){         
    if(uiUpdater !=null){
        // update your ui to the old progress first
        window.clearInterval(uiUpdater); // clearing the previous timer
    }        
    var diff = newProgress - oldProgress;
    oldProgress = newProgress;
    var stepSize = diff/5; // applying the new change in 5 steps to the UI
    uiUpdater = window.setInterVal(function(){
       // updating your UI after every 100 milliseconds
       // to give the smoothness
       diff -= stepSize; // decreasing the difference gradually
       if(diff<=0){
           window.clearInterval(uiUpdater); // clearing the interval once the update is done
       } 
    },100);
}

您必须拨打＆＃34; updateUI ＆＃34;使用新进度回调的方法。

Javascript同步调用更新

2 个答案: