javascript – 使用jQuery延迟异步任务

2019-06-08 14:20:29 阅读：238 来源： 互联网

我是JavaScript中的延迟类的新手,并希望实现一个循环遍历表单并逐个提交的函数.

看起来Deferred类是实现这一目标的方法.

我试过跟随this answer,但由于某种原因我的实现开始,等待3秒并完成.我希望它每隔3秒显示一个不同的表单名称,直到完成所有表单.

我究竟做错了什么？ JSFIDDLE

function syncAll() {
        
  var promises = [];
  var forms = [
    {'name':'form 1'},
    {'name':'form 2'},
    {'name':'form 3'}, 
    {'name':'form 4'}];

  $.each(forms, function (index, value) {
    var def = new $.Deferred();
    setTimeout(function () {
      $("#output").html("Syncing: " + value.name);
      def.resolve({ 'message': 'finito!' });
    }, 3000);
    promises.push(def);

  });

  return $.when.apply(undefined, promises).promise();
}
    
    
    $.when(syncAll()).done(function(response){
        $("#output").html(response.message);
    });
    /*
    syncAll().done(function (response) {
      $("#output").html(response.message);
    }));
    */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Start</div>

解决方法:

JSFiddle：https://jsfiddle.net/TrueBlueAussie/v6cgak1u/2/

这使用promise = promise.then(functionReturningNextPromise)模式：

function syncAll() {
    var promise = $.when();  // Start with a resolved promise.
    var forms = [
      {'name':'form 1'},
      {'name':'form 2'},
      {'name':'form 3'}, 
      {'name':'form 4'}];

    $.each(forms, function (index, value) {
        promise = promise.then(function(){
            var def = $.Deferred();
            setTimeout(function () {
                $("#output").html("Syncing: " + value.name);
                def.resolve({ 'message': 'finito!' });
            }, 3000);
            return def.promise();
        });
    });
    return promise;
}


$.when(syncAll()).done(function(response){
    $("#output").html(response.message);
});

这可以通过替换setTimeout并使用定时的promise方法来改进,它也可以链接在一起(仍然使用setTimeout实现).

请注意,$.Deferred()不需要new.

编辑：

可以利用javascript和jQuery的特性使代码更简洁：

function syncAll() {
    var forms = [
        {'name':'form 1'},
        {'name':'form 2'},
        {'name':'form 3'}, 
        {'name':'form 4'}
    ];
    return forms.reduce(function(promise, value) {
        return promise.then(function() {
            return $("#output").delay(1000).html("Syncing: " + value.name).promise();
        });
    }, $.when()).then(function() {
        return {'message': 'finito!'};
    });
}

syncAll().then(function(response) {
    $("#output").html(response.message);
});

这基本上与上面的范例相同,但是利用：

> ‘array.reduce()’从表单数组构建promise链.
> jQuery的.delay()而不是setTimeout(),来实现延迟.

标签：jquery,javascript,deferred
来源： https://codeday.me/bug/20190608/1198374.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 使用jQuery延迟异步任务