Setting setTimeout and stopping it in Javascript - With jsFiddle Example

I have many people ask me how to do certain programming scripts in PHP, MySQL, Javascript, jQuery and CSS. (Not really :P) So, I am going to now share a lot of my programming to you! I will also be showcasing different code that other people have made.

I want to show you a good example of using setTimeout as well as give you a real world example of a menu. First you must start by declaring a variable and depending on if you want it global or not setting the variable in the correct location.

var timeOut;
timeOut = setTimeout(function() {
    // Add your wonderful code here
}, 1000); // set to 1 second which is 1,000 milliseconds

As you can see, this will launch your code in 1 second.

Now let’s say you want to cancel the launch sequence for whatever reason, how do you expect to do that? Easy peasy! Just clearTimeout!

clearTimeout(timeOut);

You will want to add this code to a place to activate the clearing of the timeout.

So now, a live example. I answered a question on StackOverflow and I suggested this code as a solution to their problem. It worked for their menu. Here is an example code.

jsFiddle Example: http://jsfiddle.net/JoshuaPack/4bBPT/

HTML used for the menu:

<ul id="nav">
  <li class="navcat"><a href="#">Home</a></li>
  <li class="navcat"><a href="#">Category 1</a>
    <ul>
      <li><a href="#">Testing</a></li>
    </ul>
  </li>
  <li class="navcat"><a href="#">Category 2</a>
    <ul>
      <li><a href="#">Testing</a></li>
      <li><a href="#">Testing</a></li>
    </ul>
  </li>
  <li class="navcat"><a href="#">Category 3</a>
    <ul>
      <li><a href="#">Testing</a></li>
      <li><a href="#">Testing</a></li>
      <li><a href="#">Testing</a></li>
    </ul>
  </li>
</ul>

 

CSS used for the menu:

ul#nav {
  position:relative;
  float: left;
  width: 600px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: black;
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 12px verdana,arial,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  margin: auto;
  padding: 0 35px;
}

a.selected
{
color:Blue;
}

ul#nav .highlight a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #1C436E;
}

ul#nav  ul {
  display: none;
}

ul#nav li.highlight > ul {
  display: block;
  width: 600px;
  height: 35px;
  position: absolute;
  margin: 40px 0 0 0;
  background-color: #1C436E;
}

ul#nav li.highlight > ul li a {
  float: left;
  font: bold 12px verdana,arial,tahoma,sans-serif;
  line-height: 35px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 2 30px 0 0;
  background-color: #1C436E;
}

Jquery used for the menu:

$(document).ready(function(){
    var clearli;
    $(".navcat").hover(function() {
        clearTimeout(clearli);
        $("ul#nav li").removeClass('highlight');
        $(this).addClass('highlight');
    }, function() {
        var getthis = $(this);
        clearli = setTimeout(function() {
           $(getthis).removeClass('highlight');
        }, 1000);
    });
});

Have any questions? Feel free to leave them below.

~Joshua

PS. For more exciting programming, music, movies and all the stuff I think is cool, follow me on twitter!

Follow @MrJoshuaPack

Tags: Category , Code , Css , Example , Function , Highlight , Html , Javascript , Jquery , Menu , Testing , Text-decoration