Question

由于正常原因（商业智能，调用许多外部API等），我的应用程序上的某些页面显示非常非常慢。有时需要3-5分钟。

我希望显示带有文字的进度条，通知用户当前正在进行的操作以及他为什么要等待。

以下是我想象的功能：每次用户显示页面时，都会在表单中生成新令牌。当他提交表单时，当浏览器等待响应时，可以使用给定的令牌调用路由，该令牌返回JSON响应，给出进度百分比和当前正在进行的操作。

所以，我写了一个小jQuery代码来轮询这条路线，并更新进度条。

var pollAjax = function () {
this.url         = '';
this.interval    = 5000;
this.callback    = '';
this.running     = true;
this.poll        = function poll() {
    var that = this;
    if (that.running) {
        $.get(that.url, function (data) {
            that.callback(data);
            setTimeout(function () {
                that.poll();
            }, that.interval);
        });
    }
};
this.setInterval = function setInterval(interval) {
    this.interval = interval;
    return this;
};
this.setCallback = function setCallback(callback) {
    this.callback = callback;
    return this;
};
this.setUrl      = function setUrl(url) {
    this.url = url;
    return this;
};
this.stop        = function stop() {
    this.running = false;
    return this;
}
};

$(document).ready(function () {

var progressBars = $('.progress .progress-bar');

progressBars.each(function () {
    var progressPoll = new pollAjax();
    var progressBar  = $(this);
    progressPoll.setUrl($(this).data('refreshurl'));
    progressPoll.setInterval(2000);
    progressPoll.setCallback(function (data) {
        if (data.progress) {
            $('#progressbar').show();
            progressPoll.setInterval(200);
            progressBar.attr('data-transitiongoal', data.progress.percentage).progressbar();
            $('#progress_text').text(data.progress.text);
            console.log(data.progress);
        }
    });
    progressPoll.poll();
});

});

对于代码质量感到抱歉，我对PHP更好：）

此代码工作正常。当我在poll url中伪造一些数据时，进度条每200ms正确更新一次。

我的问题是，一旦用户离开页面，此代码就会停止工作（这很糟糕，因为这是我希望触发代码的时候）。当他提交表单时，页面仍会显示，而浏览器正在等待很长时间的响应，但自动轮询会立即停止。好像卸载事件阻止脚本继续运行，即使页面仍然显示。

你知道我怎么处理这个吗？

谢谢，本

jQuery - 为什么文档卸载会停止我的请求？

0 个答案: