能否使用Jquery优化大量Ajax循环操作?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

能否使用Jquery优化大量Ajax循环操作?

小旋风柴进 2016-03-24 09:41:52 1059

原代码是使用一个循环执行批量的$.get操作,如果使用单一循环过大,会瞬间对服务器做成大量请求。

for (i = 1; i < n; i++) {
    $.get("http://xxx/" + i,
    function(data) {
        do other..
    })
}

如果可以实现能否使用jQuery的Deferred Object进行代码的优化?把当完成一个get后再执行另外一个?令代码更有可读性?现在我用的办法是这样子:

    var url = new Array();
    for (i = 1; i < n; i++) {
        url.push("http://xxx/" + i)
    }
    var doGet = function() {
        if (url.length > 0) {
            var tmpimg = url.shift();
            $.get(tmpimg,
            function(data) {
                setTimeout(function() {
                    doGet()
                },
                500); //延时执行
            })
        } else {
            //完成//
        }
    };
JavaScript 前端开发
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:11:57

    属于流程控制问题。

    可以借鉴很多 Flow Control 的库类来协助完成该功能。例如 wind.js, async 等。

    使用这些的好处是可以更方便地处理异常。楼上的递归方法很好的解决了问题,但是如果出现异常,就不方便处理了。

    花了几分钟自己裸写了一个,供参考。推荐去学习 wind.js , async 的实现(我还没看过 -_- )。

    这个的优点是统一异常的处理。代码的层级可能会少一些。

    全选复制放进笔记

    var series = function (arr, iterator, callback) {
    
      var queues = [];
    
      var next = function (err) {
        if (err) {
          callback(err);
          return;
        }
        if(queues.length == 0) {
          callback();
          return;
        }
        queues.shift()(next);
      };
    
      var curry = function (func) {
        var args = [].slice.call(arguments);
        args.shift();
    
        return function () {
          args.concat([].slice.call(arguments));
          func.apply(func, args);
        }
      };
    
      for (var i = 0, n = arr.length; i < n; i++) {
        queues.push(curry(iterator, arr[i]));
      }
    
      next();
    };
    
    var urls = [];
    for (var i = 1; i < n; i++) {
      urls.push("http://xxx/" + i)
    }
    
    series(urls, function(url, next) {
      $.get(url, function(data) {
        // 随便做啥
    
        if(success) {
          // 如果没有任何问题
          next(null)
        } else {
          // 如果发生了某些错误
          var err = new Error();
          next(err);
        }
      })
    }, function(err) {
      if(err) {
        // 处理异常
    
      }
    });
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程