how to interrupt a timeout

Question

I am trying to implement something like this: https://www.w3schools.com/jsref/met_win_cleartimeout.asp

On my site: http://shawnwow.com/chineseCharacterHelpr/

If you type some letters on the left input, click on one of the characters, and then wait 5 seconds some images will appear (generated by doing a search on flickr).

I am trying to make it so that if they click on one character then click on another character before the 5 second timeout is done it will cancel the previous timeout and start off the new one. I am doing a workaround where I blow away the content in the tag before and after but for a moment it flickers through all the different images.

Here is where the JS starts: https://github.com/olmansju/chineseCharacterHelpr/blob/master/JS/scripts.js#L52

Mine was different than the one that is linked as similar because the command to clear timeout and to set the timeout is in the same click object. I saw many others where it was two different buttons.

please remove the links to resources and your own site and post the code here in such away that it clearly shows the issue you are having — andrew, May 22 '17 at 15:03
Possible duplicate of [Javascript timeout when no actions from user for specified time](https://stackoverflow.com/questions/7071472/javascript-timeout-when-no-actions-from-user-for-specified-time) — andrew, May 22 '17 at 15:06

score 2 · Accepted Answer · answered May 26 '17 at 14:43

var myTimeout;

$(".buttons").on("click", function(e){
  e.preventDefault();
  var curText = $(this).text();
  clearTimeout( myTimeout );
  myTimeout = setTimeout(function(){
    $("#banner").text("Banner " + curText);
  }, 3000);
});//.buttons click()

#banner
{
  background-color: orange;
  color: white;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
#buttons-container
{
  margin-top: 20px;
  text-align: center;
}
#buttons-container .buttons
{
  border: 2px solid magenta;
  color: magenta;
  display: inline-block;
  height: 22px;
  line-height: 16px;
  margin: 0 2px;
  width: 22px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="banner"></div>
<div id="buttons-container">
  <button class="buttons">1</button>  
  <button class="buttons">2</button>
  <button class="buttons">3</button>
  <button class="buttons">4</button>
  <button class="buttons">5</button>
</div>

@Sebastián `e.preventDefault()` suppresses the default browser behaviour for a given event. E.g. suppose there is an anchor tag with `buttons` class. So if we click that, the browser will redirect us to the location specified in `href` attribute. But if we use `e.preventDefault()` that redirection will not happen, only JS code added in its click handlers will run. — Mohit Bhardwaj, Feb 11 '22 at 11:51

Mohit Bhardwaj · Answer 2 · 2017-05-22T15:10:09.950

0

Use clearTimeout to clear a timeout set using setTimeout.

To clear a particular scheduled timeout, you need to store a reference to that in a variable. So, you can do something like this:

var myTimeout = setTimeout(function(){
  alert("Timeout fired");
}, 5000 );

// to interrupt/cancel the timeout
clearTimeout( myTimeout );

var myTimeout;

//sets timeout only once
$("#set").one("click", function(e){
  e.preventDefault();
  $(this).prop("disabled", true);
  myTimeout = setTimeout(function(){
    alert("timeout fired");
  }, 4000);//
});//#set click()

$("#clear").one("click", function(e){
  e.preventDefault();
  clearTimeout( myTimeout );  
  $(this).prop("disabled", true);
});//#clear click()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="set">Set Timeout</button>
<button id="clear">Clear Timeout</button>

edited May 22 '17 at 15:10

answered May 22 '17 at 15:04

Mohit Bhardwaj

9,650
3
37
64

Can this be done within the same function though, not a separate clear timeout? In my example I have 10 characters; each will display different images based on which one is clicked. There is a timeout after the character is clicked, so if someone clicks 1 character and before the 5 seconds is up they decide to click on another, it will stop the first one from firing off and start the timeout on the second. How did you get the code snippet module in your answer, does it do that automatically if you have JS and HTML? – shellwe May 26 '17 at 13:38
@shellwe There's a button for code snippet in the editor toolbar. You need to use that for such snippet. I will update my answer as per your problem. – Mohit Bhardwaj May 26 '17 at 14:00

score 0 · Answer 3 · answered May 22 '17 at 15:05

You have to declare the imageDelay variable outside of your event handler.

When you declare it inside the function it will create a new local variable each time the handler is invoked, so your clearTimeout does not clear the timeout that was created previously.

how to interrupt a timeout

3 Answers3