javascript - 调用ajax的Javascript计时器

我有许多不同的表单元素。当任何表单元素的值更改时，我需要在更改后500ms进行ajax调用。

但是，如果另一个表单元素的值更改了，那么我想将计时器重置为500ms，这样就避免了多个Ajax请求彼此之间在500ms之内发生的一系列更改。

是否有针对此要求的JavaScript或jQuery解决方案？

最佳答案

这是一些代码，演示您正在寻找的原理：

// Keeps track of the timer id in a scope that is outside of the event function
// The variable will remain in memory and available to the next event call
var myTimer;

// Detect changes on keyup.
$('.textbox').on('keyup', function () {
    console.log('keyup');
    setMyTimer(500);
});
// Detect on change.
$('select').on('change', function () {
    console.log('change');
    setMyTimer(1000);
});

function setMyTimer(timerDelay) {
    // if myTimer has a value, then we should clear the timer. This stops us
    // from queuing multiple timers
    if (myTimer) {
        console.log('clear tiemout');
        clearTimeout(myTimer);
    }

    // Set the timer. It will be cleared if there is another handled 'keyup'
    // event sooner than the timerDelay parameter
    myTimer = setTimeout(function () {
        console.log('Ajax stuff');
        // ajax stuff
    }, timerDelay);
};

在生产中使用之前，请删除console.log代码。

观看此工作示例：

http://jsfiddle.net/cC6Dq/5/