Using Timers SetInterval and settimeout in jquery

Source: Internet
Author: User

Calling other methods directly in Ready will prompt for missing object errors, and the workaround is as follows:

Method 1. The function is not in $ (functions () {...}) , setinterval The first parameter is "Showatuto"

<script type= "Text/javascript" >

var t,n,count = 0;

$ (function () {

t = setinterval ("Showauto ()", 1000);

})

function Showauto () {

$ (' #ind '). HTML (count++);

}

</script>

method 2.  function in $ (function () {...}) Inside, setinterval the first parameter is Showauto  

<script type="text/javascript">vart,n,count = 0;$(function(){    function showAuto(){        $(‘#ind‘).html(count++);    }    t = setInterval(showAuto, 1000); })</script>

Method 3, the solution of the function in the timer cannot be passed the parameter

varnum = 0;function slideRun(x){     scrollImg.animate({top:- h * x + "px"},{duration:500,queue:false});     $(".slideNumber span").removeClass("on").eq(num).addClass("on");     num++;}vartimer = setInterval(function(){slideRun(num)}, 500);    // 要给函数用闭包的形势

Difference:

SetTimeout ()

To execute an expression or function from a specified time delay after loading;

Execute only once; use with Window.cleartimeout.

SetInterval ()

At execution time, it executes an expression or function from the loading of the page at a specified interval (functionally similar to a recursive function); used with Window.clearinterval.

Additional notes:

Both of these methods can be used to implement JavaScript after a fixed time period. But each has its own application scenario.

Method

In fact, settimeout and setinterval have the same syntax. They all have two parameters, one is the code string to execute, and one is the time interval in milliseconds, and the code executes after that time period.

However, the two functions are still different, setinterval after the execution of the code, after the fixed time interval, it will also automatically repeat the code, and settimeout only one time to execute the code.

Although it appears that settimeout can only be applied to actions in On-off mode, it is possible to repeatedly invoke settimeout by creating a function loop for repeated operations:

ShowTime ();

function ShowTime ()

{

var today = new Date ();

Alert ("The time is:" + today.tostring ());

SetTimeout ("ShowTime ()", 5000);

}

Once this function is called, the time is displayed every 5 seconds. If you use SetInterval, the corresponding code is as follows:

SetInterval ("ShowTime ()", 5000);

function ShowTime ()

{

var today = new Date ();

Alert ("The time is:" + today.tostring ());

}

The two methods may look very similar, and the results shown will be much the same, but the big difference is that the SetTimeout method does not execute the Showtime function every 5 seconds, and it executes the Showtime function 5 seconds after each call to settimeout. This means that if the body part of the Showtime function takes 2 seconds to execute, the entire function is executed every 7 seconds. But setinterval is not bound by the function that he calls, it simply repeats the function once every time.

If it is required to perform an action precisely after every fixed interval, it is best to use setinterval, and if you do not want to cause mutual interference with successive calls, especially if the call of a function requires heavy computation and long processing time, then it is best to use settimeout.

Using Timers SetInterval and settimeout in jquery

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.