3

I have this function that is triggered if a user clicks a div. The user can click this div many times, thus triggering the function many times.

Every time the function is called while it is already running, I want the currently running function to stop running and start over. This is hard to describe but I hope it makes sense. Essentially, I want the function to run completely through only if the user does not trigger the function again while it is running.

Is there a way to do this?

Justin Meltzer
  • 13,318
  • 32
  • 117
  • 182

2 Answers2

4

Javascript is single threaded. Thus the second clicks will not get processed until the javascript attached to the first click has run to completion.

You can read more about how the javascript event queue works here: How does JavaScript handle AJAX responses in the background?

If you are using asynchronous operations like jQuery animations, then those are run in little pieces off timers and you can get subsequent button presses while an animation is run. In that cause, you would need to stop the animation. With jQuery, you would use the .stop(true, true) method to stop the current animation, advance it to completion and clear it from the queue.

If you include your actual code, we could give a more specific answer for your situation.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 1
    Ok so you're saying it's kind of like a queue? – Justin Meltzer Jan 27 '12 at 23:28
  • And there's no way to push all but the most recent click event off the queue? – Justin Meltzer Jan 27 '12 at 23:29
  • @JustinMeltzer, Yes, unless you're using timed events with timeouts or intervals. What exactly is the function doing that would take so long that the user has time to click the div again? – mowwwalker Jan 27 '12 at 23:30
  • @JustinMeltzer - if you read the reference I included, it answers your questions (that's why I included the reference link). Yes, it is an event queue. Events are processed one at a time in order. – jfriend00 Jan 27 '12 at 23:32
  • @Walkerneo It's a slideshow that fades images in and out. The user can go to a specific image by clicking a corresponding div, but then the slideshow continues after that. – Justin Meltzer Jan 27 '12 at 23:32
  • @JustinMeltzer, Read jfriend's edit. In jQuery, you can use `.stop()` to stop animations. – mowwwalker Jan 27 '12 at 23:35
3

How long does your function take to execute? It sounds like you ultimately want to throttle the clicks so that only one is registered every X seconds/milliseconds. The best way to do that is to delay the execution of the function from the click using setTimeout and then clearing that timeout every time a user clicks. So if they click 3 times in one second it will only get executed once.

Example: Function won't run more than once per second

var timeout;

function myClickHandler(){
    clearTimeout(timeout);
    timeout = setTimeout(function(){
        // Execute your code here
    }, 1000); // 1000ms delay
};
pseudosavant
  • 7,056
  • 2
  • 36
  • 41