JavaScript 输入超时

Question

我有许多文本框(数十个)需要在用户更改值时触发事件。我的用户请求不要有提交按钮，并且他们不想激活不同的控件来触发事件。据我了解，这意味着我只能在 oninput 事件中运行我的方法。我的问题是我不想每次击键都运行该方法 - 我想在假设用户在提交更改之前完成输入之前等待一段时间。例如，其中一个输入框正在寻找一个数字。如果用户键入“120”，我不希望该方法为“1”触发一次，再次为“12”触发，最后第三次为“120”触发。

目前我有一个函数，使用 setTimeout 延迟响应一秒钟，以便用户完成输入信息。如果用户在这一秒窗口内输入另一个字符，倒计时就会重新开始。

function CombineTextEntries(ctrl, FunctionObj){
    // This function prevents a text box from updating the Layout until the UpdateDelay time has been reached

    if (typeof(this.UpdateDelayTimeout) !== "undefined"){
        window.clearTimeout(this.UpdateDelayTimeout);
    }

    this.UpdateDelayTimeout = setTimeout( function(){FunctionObj();}, 1000);
}

我通过将 html 的 oninput 属性设置为来调用它

oninput="CombineTextEntriesWithArg(this, MyFunction)"

我遇到的问题是某些函数需要一个或多个参数。我可以创建一个不同的函数处理程序，例如

function CombineTextEntriesWithArg(ctrl, FunctionObj, Arg){
    if (typeof(this.UpdateDelayTimeout) !== "undefined"){
        window.clearTimeout(this.UpdateDelayTimeout);
    }

    this.UpdateDelayTimeout = setTimeout( function(){FunctionObj(Arg);}, 1000);
}

并这样调用它:

oninput="CombineTextEntriesWithArg(this, MyFunction, MyArg)"

但这看起来相当笨拙。谁能提出更好的解决方案？传递带有枚举参数的对象是最好的方法 As specified in this answer 吗？我对此唯一的犹豫是我需要编辑我需要调用的每个函数来接受单个对象，这有点痛苦。

Answer 1

您可以使用apply使传递参数变得更容易。

function CombineTextEntries(ctrl, fnc, args){

    if (ctrl.updateDelayTimeout ){
        window.clearTimeout(ctrl.updateDelayTimeout );
    }

    ctrl.updateDelayTimeout = setTimeout( function(){fnc.apply(this, args);}, 1000);
}

并调用它

CombineTextEntries(this, yourFunctionName);
CombineTextEntries(this, yourFunctionName, [argument1]);
CombineTextEntries(this, yourFunctionName, [argument1, argument2]);