阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery ajaxQueue 中文API文档

      插件 jQuery.ajaxQueue 中文API文档

      源码 & 下载

      适用场景

      jQuery中ajax请求的简单队列。

      插件特点

      此pluging创建一个新方法,确保一次只运行一个AJAX请求。

      它在使用jQuery的内置队列开始新的请求之前等待先前的请求完成。

      jQuery.ajaxQueue(options)
      

      采用与 jQuery.ajax 相同的选项,并返回一个promise。返回值不是a jqXHR

      但它会表现得像一个。该 abort() 如果还没有开始对返回的对象方法从队列中删除请求,或一旦请求开始一起传递给jqXHR的中止方法。

      基本用法

      (function( $ ) {
        /*
          ======== A Handy Little QUnit Reference ========
          http://docs.jquery.com/QUnit
          Test methods:
            expect(numAssertions)
            stop(increment)
            start(decrement)
          Test assertions:
            ok(value, [message])
            equal(actual, expected, [message])
            notEqual(actual, expected, [message])
            deepEqual(actual, expected, [message])
            notDeepEqual(actual, expected, [message])
            strictEqual(actual, expected, [message])
            notStrictEqual(actual, expected, [message])
            raises(block, [expected], [message])
        */
      
        var requests;
      
        module( "ajaxQueue", {
          setup: function() {
            requests = [];
            this.xhr = sinon.useFakeXMLHttpRequest();
            this.xhr.onCreate = function (xhr) {
              xhr.customRespond = function() {
                this.respond(200, { "Content-Type": "application/json" },
                                    '{ "id": 10, "name": "ajaxQueue" }');
              };
              requests.push(xhr);
            };
          },
          teardown: function() {
            this.xhr.restore();
          }
        });
      
        asyncTest( "Smoke detection: Normal ajax request", 1, function () {
          $.ajax({
            url: "mock.json",
            dataType: "json",
            success: function(data) {
              start();
              equal(data.name, "ajaxQueue");
            }
          });
          requests[0].customRespond();
        });
      
        asyncTest( "Single ajaxQueue request", 1, function () {
          $.ajaxQueue({
            url: "mock.json",
            dataType: "json",
            success: function(data) {
              start();
              equal(data.name, "ajaxQueue");
            }
          });
          requests[0].customRespond();
        });
      
        asyncTest( "Concurrent ajaxQueue requests", 9, function () {
          $.ajaxQueue({
            url: "first_mock.json",
            dataType: "json",
            success: function(data) {
              console.log("\n1st mock received");
              equal(data.name, "ajaxQueue");
            }
          });
          $.ajaxQueue({
            url: "second_mock.json",
            dataType: "json",
            success: function(data) {
              console.log("2nd mock received");
              equal(data.name, "ajaxQueue");
            }
          });
          $.ajaxQueue({
            url: "third_mock.json",
            dataType: "json",
            success: function(data) {
              console.log("3rd mock received");
              start();
              equal(data.name, "ajaxQueue");
            }
          });
      
          equal(requests.length, 1, "Only one request is called at a time");
          equal(requests[0].url, "first_mock.json", "... and it's the 1st");
        
          setTimeout(function() {
            requests[0].customRespond();
          
            equal(requests.length, 2, "Next request is called after 1st is received");
            equal(requests[1].url, "second_mock.json", "... and it's the 2nd");
          
            setTimeout(function() {
              requests[1].customRespond();
            
              equal(requests.length, 3, "Next request is called after 2nd is received");
              equal(requests[2].url, "third_mock.json", "... and it's the 3rd");
            
              requests[2].customRespond();
            }, 500);
          }, 500);
        });
      
      }(jQuery));
      

      源码解析

      参考引用

      目录
      目录