插件 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));

源码解析

参考引用

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了