Execute action after x seconds only once - Continued

[Metophase]

Hey guys whilst I was trying to solve this issue I came across your thread which I found helpful to an extent, basically I spent hours reading up and realised that the solutions you provided doesn't do what you actually wanted it to do so here I offer my solution.

In a new thread to be clear and this is my first post so, please read ;)

The answers you give don't actually clear the timer since it is in the function after the one you have just executed let me explain...

function doSomething() {
        if(timeout) clearTimeout(timeout);
        var timeout = setTimeout(function() {
        // your function code
}, 2000);
}

When you call doSomething() twice the second call is queued and isn't executed till the entire function as finished so therefore the clearTimeout call is pointless since the entire first call as already been executed... this included the time-out you have set.

So time for my solution, is if this is for a user input field is quite simple and cheeky.

Retrieve the length of the input box outside of the timeout and then also inside and check they are the same length. This isn;t a brilliantly slimline solution as it technically executes the "function" but as you can see it executes 2 or 3 lines of it ;), and strips the bulk of your code.

function doSomething() {

        var outside = getElementById("inputid").value;

        var timeout = setTimeout(function() {
        var inside = getElementById("inputid").value;
        if(inside.length != outside.length) {return}

        // if lengths have changed during the time out period the function stops....the                                    next one executes but again stops after 4 lines if the user continues to type, if they have stopped you will continue to....
        
       // your function code
}, 2000);
}

I hope this gets read and some of you veteran coders give your opinions or point out any problems with this code.

[Taywin]

The first function gives you more flexibility and ease in calling and passing variables. The second is an inline which has more control but at the same time is more difficult to construct especially when you need to pass in variables. It is good to use the call as a function pointer.

In your code, it contains hard-coded (get id and get value) which may not be flexible enough. Yet, you could modify it to use in something else.

However, your "timeout" will become useless because it is declared inside the doSomething() scope. If you want to keep the value to be clear later, you need to save it somewhere. Global variable may be used in this case though.

So, it depends on how you construct your script. I normally check for duplicated calls inside the function being called itself because I need to do a lot of things in a function when I keep calling it. :P

[MartinRinehart]

Taywin,

Your normally superb posts hit a speed bump. "If you want to keep the value ..." perhaps you should attach it as a property to the function, no?

function maybe_later() {
    
    if ( maybe_later.timeout ) { ... }

    maybe_later.timeout = setTimeout( ... );

[Taywin]

Ah yes, you are correctly. Make it global to its own function. Thanks for reminding me. :)