CODEWITHSUNDEEP
javascriptsettimeout
nickvans
nickvans

Reputation: 938

Javascript input timeout

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.

Upvotes: 1

Views: 630

Answers (1)

epascarello
epascarello

Reputation: 207501

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

Upvotes: 1

Related Questions