javascript - 一个 JavaScript 函数延迟执行另一个函数

Question

我看到下面的代码片段，它在每次用户更改后验证输入字段，但它会等待用户不活动 1、5 秒，然后才真正开始验证:

var timer;

var inputElement = document.getElementById("nameInput");
inputElement.oninput = function()
{
    delayedInputValidation(validateInput, 1500);
};

function delayedInputValidation(func, delayInMilliseconds)
{
    clearTimeout(timer);

    timer = setTimeout(func, delayInMilliseconds);
}

function validateInput()
{
    ... //stuff here
}

我的问题不是关于输入验证，而是关于超时机制。我尝试概括延迟函数以使其适用于任意函数:

function delayedFunction(timer, func,delayInMilliseconds)
{
    clearTimeout(timer);

    timer = setTimeout(func, delayInMilliseconds);
}

重点是您的 JavaScript 中有多个计时器，例如:

var inputTimer;
var otherTimer;
...

如果您传递相同的计时器，延迟函数将清除(重置)正确的计时器，然后使用 setTimeout 函数再次设置它。

但是，这不起作用，因为计时器对象以按值引用的方式传递( discussion here )，导致局部变量计时器发生变化，但实际的 inputTimer 没有变化。

如何修复此方法？

Answer 1

你可以使用类似的东西

var timers = {};
function delayedFunction(timer, func, delayInMilliseconds) {
    clearTimeout(timers[timer]);
    timers[timer] = setTimeout(func, delayInMilliseconds);
}
delayedFunction('inputTimer', func1, delay1);
delayedFunction('otherTimer', func2, delay2);

或者像这样:

var timers = [],
    inputTimer = 0,
    otherTimer = 1;
function delayedFunction(timer, func, delayInMilliseconds) {
    clearTimeout(timers[timer]);
    timers[timer] = setTimeout(func, delayInMilliseconds);
}
delayedFunction(inputTimer, func1, delay1);
delayedFunction(otherTimer, func2, delay2);