Javascript input timeout

Question

I've got a number of text boxes (dozens) that need to fire events when the user changes values. My users have requested not to have a commit button, and they don't want to have to activate a different control for the event to fire. So far as I understand it, that means I'm limited to running my method in the oninput event. My problem is I don't want to run the method with every key stroke-- I want to wait for some amount of time before assuming the user is done typing before commiting the change. For instance, one of the input boxes is looking for a number. If the user keys in '120' I don't want the method to fire once for '1', again for '12' then finally a third time for '120'.

Currently I have a function that uses setTimeout to delay the response for a second for the user to finish inputting info. If the user enters another character within this one second window the countdown starts over.

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);
}

I call this by setting the oninput attribute of the html to

oninput="CombineTextEntriesWithArg(this, MyFunction)"

The problem I am running into is some functions require one or more arguments. I can create a different function handler such as

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

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

and call it like this:

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

but that seems rather kludgy. Can anyone propose a better solution? Is the best way by passing an object with the arguments enumerated within it As specified in this answer? My only hesitation to this is I'd need to edit each of the functions I need to call to accept a single object which is kind of a pain.

to resume on what @Teemu said, you should hook the handler in code. You may use Function.bind() for that. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — GameAlchemist
– GameAlchemist, Commented Apr 14, 2014 at 18:54

epascarello · Accepted Answer · 2014-04-14 18:46:29Z

1

You can use apply to make it easier to pass arguments.

function CombineTextEntries(ctrl, fnc, args){

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

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

and call it

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

answered Apr 14, 2014 at 18:46

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript input timeout

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related