jquery - 减少 AJAX 发出的服务器请求

Question

我有一个 slider 组件，它调用 AJAX 请求来根据 slider 指向的值更新表格。

在我的本地服务器上，不实现延迟功能似乎没问题，但自从将我的代码部署到云服务上后，我注意到当用户滑动。

我当前的代码:

$( "#psi_slider" ).slider({
    range: "min",
    value:0,
    min:0,
    max:max_psi, 
    slide: function(event, ui) {
        update_results(json, get_values());
    }
});

有人可以建议我如何在请求之间实现计时器，即每秒发送一个请求吗？

Answer 1

此场景与用户在字段上键入内容非常相似，并且您希望在用户键入时更新数据/提供，但不一定每次用户按下按键时都更新数据/提供。

解决这种情况有三种方法:

方法 1:每次发生更改时进行更新

当“某些内容发生变化”意味着“用户按下一个键”时，这可能是一种可行的方法，但当它意味着“ slider 移动了一点点”(这就是您的情况)时，这绝对不是一种可行的方法。

...

whenSomethingChanges : function(){
    updateData();
}

...

function updateData(){
    // Make your ajax call
}

Fiddle

方法 2:等到事情停止变化，然后更新

也就是说，当用户停止打字或停止移动 slider 一段时间时，更新您的数据。对于 slider 来说，这种方法足以大幅减少 Ajax 调用量。然而，它有一个明显的缺点，如果用户不停止移动东西，他/她将看不到他/她的操作的结果，并且可能会感到沮丧。

var timeout = 500; // half a second
var scheduler = new Scheduler(updateData, timeout);

...

whenSomethingChanges: function(){
    scheduler.updateDataInAWhile();
}

...

function Scheduler(callback, timeout){

    this.callback = callback;
    this.timeout = timeout;
    this.updateDataTimeout = null;

    this.updateDataInAWhile = function(){

        if(this.updateDataTimeout){
            clearTimeout(this.updateDataTimeout);
        }

        var self = this;
        this.updateDataTimeout = setTimeout(function(){
            self.callCallback();
        }, this.timeout);
    };

    this.callCallback = function(){
        if($.isFunction(this.callback)){
            this.callback();
        }
    } 
}

function updateData(){
    // Make your ajax call
}

Fiddle

方法 3:在事物不断变化的情况下定期更新

标题说明了一切。这将限制 Ajax 调用的频率，同时以连续的方式向用户提供反馈。

var timeout = 500; // half a second
var scheduler = new Scheduler(updateData, timeout);

....

whenSomethingChanges: function(){
    scheduler.keepUpdating();
}

...

function Scheduler(callback, timeout) {

    this.callback = callback;
    this.timeout = timeout;
    this.currentlyUpdating = false;
    this.finalTimeout = null;

    this.keepUpdating = function(){
        if(!this.currentlyUpdating){
            this.startPeriodicUpdate();
        }

        if(this.finalTimeout){
            clearTimeout(this.finalTimeout);
        }
        var self = this;
        this.finalTimeout = setTimeout(function(){
                self.discontinueUpdates();
            }, this.timeout);
    };

    this.startPeriodicUpdate = function(){
        this.currentlyUpdating = true;        
        this.runPeriodicUpdate();
    };

    this.runPeriodicUpdate = function(){

        if($.isFunction(this.callback)){
            this.callback();
        }

        var self = this;
        if(this.currentlyUpdating){
            setTimeout(function(){
                self.runPeriodicUpdate()
            }, self.timeout);
        }
    };

    this.discontinueUpdates = function(){
        this.currentlyUpdating = false;
    };
}

Fiddle