1

I want to call setTimeout() after a click occurs.

If the user clicks again before 300ms has passed, I want to stop that timer, fire off another function and restart the original timer.

I know about setTimeout() but I'm not sure how to approach this problem.

Blender
  • 289,723
  • 53
  • 439
  • 496

2 Answers2

3

JavaScript:

myTimeout = setTimeout(function() {
                // this will fire in 300ms if you don't perform some other action!
          },300); 

document.getElementById("button").click = function() {
   // button clicked, stop the timeout
   clearTimeout(myTimeout);
};

HTML:

<button id="button">Click me</button>

The setTimeout starts the 300ms timer. the click handler binds a click event to a button on the page that, when clicked, will stop the timer by using clearTimeout.

When you call setTimeout, assign it to a variable. Then you can use that variable to stop the timer later by calling clearTimeout.

You can use the same technique with any event, like keypress, mouseover events, button or DOM element clicks, and many more.

Note that the same procedure also applies to setInterval. 

myInterval = setInterval(function() {
               // do stuff every 300ms
             },300);

clearInterval(myInterval);  // stop the interval

With addEventListener:

function start() {
    window.addEventListener("click", function() { 
        timeout = setTimeout(function() {
            // do stuff after 300ms after the first click
            clearTimeout(timeout);
            start();
        }, 300)
    }, false);
}

The above should bind a global click listener on the page and clear and restart the timer recursively after a click. The listener stops if there are no clicks though, but this should get you started.

jamesmortensen
  • 33,636
  • 11
  • 99
  • 120
  • what if i want to d it with add event listner? –  Apr 09 '12 at 04:04
  • jmort253 u have been really kind but here is what i want to do i want to make a pie menu appear after 300ms if i just clicked but if i click and drag mouse i want that pie menu dont appears and option get selected i have done every thing just trying really hard to do this but its not happening for me ..and i want to do this with even handlers so that i can add and remove them –  Apr 09 '12 at 04:22
  • @john - I don't think I can be any more helpful. My advice to you is to think about how you can break the problem into smaller programming parts, and then start with just that component. Try to make some progress on this yourself, then if you get stuck somewhere and have a more specific question, come back and ask again. Just be sure to take your time writing your question so it doesn't get closed. Also, show some code examples, people here can be *very* helpful, but you have to demonstrate that you've done the work yourself also. :) – jamesmortensen Apr 09 '12 at 04:27
0

I think , you can use timeout for this... window.setTimeout("", 300);

I didn't what exactly you want to do...but, i hope, this will help you.

Vicky
  • 1,215
  • 6
  • 22
  • 45