资讯专栏INFORMATION COLUMN

ajax延迟插件

zhangwang / 2932人阅读

最近遇到需要做ajax延迟的需求,上一段代码记录下:

var XHRService = function(options) {
    this.options = options;
    this.reqTimer = null;
};

XHRService.prototype = {
    constructor: XHRService,

    req: function(options) {
        var that = this,
            defer = $.Deferred();

        clearTimeout(this.reqTimer);
        this.reqTimer = setTimeout(function() {
            that._req(options, defer);
        }, this.options.reqDelay);

        return defer.promise();
    },

    _req: function(options, defer) {
        var that = this;

        if (this.xhr) {
            this.xhr.abort();
        }

        if (typeof this.options.before === "function") {
            clearTimeout(this.loadingTimer);
            this.loadingTimer = setTimeout(function() {
                that.options.before();
            }, this.options.loadingDelay);
        }

        this.xhr = $.ajax(options).done(function(data) {
                defer.resolve(data);
            })
            .always(function(res, status, xhrObj) {
                clearTimeout(that.loadingTimer);

                if (typeof that.options.after === "function") {
                    that.options.after();
                }

                if (xhrObj === that.xhr) {
                    that.xhr = null;
                }
            });
    }
};
var xhr = new XHRService({
    reqDelay: 10,
    loadingDelay: 10,
    before: function() {
        console.log("show loading...");//显示loadingbar
    },
    after: function() {
        console.log("hide loading...");//隐藏loadingbar
    }
});
 xhr.req({
        url: url,
        dataType: "json"
    }).done(function(data) {
        console.log("done!");
    });

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86210.html

相关文章

  • performance-report页面性能、资源、错误、ajax,fetch请求上报插件 完善小巧

    摘要:只做页面性能数据的采集和上报,是比较完整和健全的数据上报插件,它可以帮你完成以下功能是比较完整和健全的数据上报插件,它可以帮你完成以下功能当前页面上一页面当前浏览器版本信息页面性能数据信息,例如页面加载时间,白屏时间,解析时间等当前页面 performance-report只做页面性能数据的采集和上报,是比较完整和健全的数据上报插件,它可以帮你完成以下功能: performance-r...

    testbird 评论0 收藏0
  • select2 和 ajax的坑

    select2,一款带多选功能,样式更加好看的select插件。 下方记录坑,前方高能. 要用ajax发请求并且为select2赋初始值 $.ajax({ url : _ctx+/basInfo/listPsinfoData, data : page=1&rows=9999&flag=...

    VEIGHTZ 评论0 收藏0
  • select2 和 ajax的坑

    select2,一款带多选功能,样式更加好看的select插件。 下方记录坑,前方高能. 要用ajax发请求并且为select2赋初始值 $.ajax({ url : _ctx+/basInfo/listPsinfoData, data : page=1&rows=9999&flag=...

    plokmju88 评论0 收藏0

发表评论

0条评论

zhangwang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<