Prevent Javascript Function From Running Twice (settimeout)

I have this function that runs for several seconds with the use of setTimeout. This function is ran when a button is clicked. function complete() { var div = document.getElemen

Solution 1:

Your running = false; should be inside timeout function, as timeout will execute asyncronically, the running = false; will execute before your timeout ends

A simple example would be

var running = false,
    div = document.getElementById('response'),
    limit = 5,
    current = 0;

$('#trigger').click(function() {
    if (running === true) {
        alert('Error: The cycle was running. Aborting.');
        running = false;
        returnfalse;
    }
    running = true;
    var end = setInterval(function() {
        if (current >= limit || running == false) {
            running = false;
            clearInterval(end);
        }
        div.innerHTML += 'Hello World<br />';
        current++;
    }, 500);

});

JSFiddle Example

Solution 2:

Assuming you've used addEventListener to attach the click event to the button, you could remove the listener while timeouts are in progress:

functioncomplete() {
    var div = document.getElementById('log'),
        button = this;
    this.removeEventListener('click', complete);
    setTimeout(function(){...});
                 :
    setTimeout(function(){...});
    // If you later want to make the button clickable again, just uncomment the line below:// setTimeout(function () {button.addEventListener('click', complete);}, 10000);
}

Solution 3:

for stop running timer you have to clear him

var stopTimer;

        functionsomeFunction() {
            stopTimer= setTimeout(function(){
                console.log("something done");
            }, 3000);
        }

        functionstopFunction() {
            clearTimeout(stopTimer);
        }

Solution 4:

If you are using jquery it could be more easy.

E.q:

functioncomplete() {
    var div = document.getElementById('log');
    setTimeout(function(){ div.innerHTML = div.innerHTML + intro[Math.floor(Math.random() * intro.length)] + "<br>"; }, 500);
    setTimeout(function(){ div.innerHTML = div.innerHTML + second[Math.floor(Math.random() * second.length)] + "<br>"; }, 2560);
    setTimeout(function(){ div.innerHTML = div.innerHTML + third[Math.floor(Math.random() * third.length)] + "<br>"; }, 4860);
    setTimeout(function(){ div.innerHTML = div.innerHTML + fourth[Math.floor(Math.random() * fourth.length)] + "<br>"; }, 7860);
    setTimeout(function(){ div.innerHTML = div.innerHTML + fifth[Math.floor(Math.random() * fifth.length)] + "<br>"; }, 9640);

    $( "input[type='button']" ).unbind( "click", complete );
}


$( "input[type='button']" ).bind( "click", complete );

I did some example for you: http://jsfiddle.net/ZA5Ga/

good luck!