JS timer classification introduction

JS timers are divided into two types

Timer (setTimeout delayed one-time timer, setInterval repeated timer)

 

【Case】

(1) Repetitive timer, which is often used to refresh the form, for some forms of fake real-time specified time refresh synchronization

<p class="count">0</p>
<script>  
	$(function(){
	    // Repeated timer, sent once every 1 second
	      setInterval('alert()',1000);
	})
	//ajax request method
	function alert(){
	    //Send ajax request
	    $.get("{:U('Stydy/stydy')}", function(data){
		  $('.count').html(Math.random());
	    });
	}
</script>

    View the effect: you can find that a request is sent every second~~

                      So change the random number every second

 

(2) One-time timer

Still the same as above, just changed the method

Replace setInterval with setTimeout, the browser can see the effect, and only send a request once

 

(3) Loop and stop

Use a variable var timer = setInterval(fun,2000);

Assign setInterval to a variable. When you want to stop, you only need to use clearInterval(timer); to stop the above function that executes fun every two seconds.

<script>  
	$(function(){
		var timesRun = 0;
		var interval = setInterval(function(){
			timesRun += 1;
			if(timesRun == 10){
				clearInterval(interval);
			}
			//do whatever here..
			$('.count').html(Math.random());
		}, 1000);
	})
</script>

 

 

 

 

【Summarize】

(1) Number of executions

        When setTimeout(expression, delay time) is executed, it is to execute the expression once after the specified time delay after loading. Remember, the number of times is once. The setInterval(expression, interaction time) is different, it executes the expression every specified time after it is loaded. So, it's totally different

(2) How to use

 

       Many people are accustomed to including setTimeout in the executed function, and then use setTimeout again outside the function to achieve the purpose of timed execution. In this way, the setTimeout outside the function triggers the setTimeout again when the function is executed to form a recurring timing effect. Each has its own advantages when using it. When using setInterval, you need to manually stop the tick trigger. And using setTimeout nested in the method, you can stop calling setTimeout according to the logic of the method itself, which is equivalent to stopping the trigger. In fact, the two things can completely simulate each other, and which one to use depends on the needs at the time.

 

Share insights from others:

The same point: both methods trigger the interval time first, and then trigger the callback function

(the difference)

1.setInterval executes the expression every specified time, if it does not stop, it will continue to execute

When setTimeout is executed, it executes the expression once after a delay of the specified time after loading, and the number of times is only one time.

2. Include setTimeout in the executed function, and then use setTimeout again outside the function to achieve the purpose of timing execution 

In this way, the setTimeout outside the function triggers the setTimeout again when the function is executed to form a recurring timing effect, but

In this way, each time is equivalent to delay time + function execution time. The longer the time, the greater the error;

 

And setInterval is the interval time to execute the function, and there will be no error, setInterval is suitable for displaying time, and the accuracy is high

 

 

 

 

 

 

 

 

 

.