A brief discussion on JavaScript timeout calls and intermittent calls_javascript skills

Intermittent call

Intermittent calls are very common in JavaScript. setInterval is called repeatedly at a certain interval.

The

setInterval() method receives two parameters: the first parameter can be a string or a function, and the second parameter is a number in milliseconds, indicating the length of the repeat interval.

The parameter is a string

When the first passed parameter is a string, as follows:

setInterval("alert('this is a string.')",1000);

The string here is a piece of JavaScript code, which is the same as the parameter of the eval() function passed in. If there are two quotation marks inside and outside, remember that the quotation marks should not be the same.

setInterval() will return a numeric ID. This ID is a unique identifier of the planned execution code, so it can be used to cancel repeated operations. SetInterval() corresponds to a method to cancel the operation: clearInterval(). Of course, if you want to cancel a repeated operation, clearInterval() must be placed before the execution is completed.

For example:

var intervalId=setInterval(...);
clearInterval(intervalId);

First we get the ID, and then pass the ID into clearInterval(). Because the cancellation operation follows setInterval(), it can be canceled immediately, just like it didn't happen.

The parameter is a function

Because when the parameter passed is a string, it may cause performance loss, so under normal circumstances, the most commonly used method is to pass a function to it.

is as follows:

var num=0;
function increNum(){
 num++;
 if(num>=10){
  clearInterval(intervalId);
  alert('over');
 }
}
intervalId=setInterval(increNum,500);

This program sets an incrNum function and passes it as a parameter to setInterval(). At the same time, when it is repeated 10 times, the running operation is canceled and a warning box pops up.

Timeout call

Timeout call is similar to intermittent call, setTimeout(), it also receives two parameters, the first one can be a string containing JavaScript code, or it can be a function, the second parameter is the delay time and setInterval() The parameters of the method are the same.

But here’s something to note:

The delay time does not mean that the program will definitely be executed after the set delay.

Why?

Because JavaScript is a single-threaded interpreter, it can only execute one piece of code within a certain period of time, and cannot execute multiple pieces of code at the same time. Therefore, there is a task queue in JavaScript, and the tasks to be executed are arranged in the queue in order. The set delay time is the time after which the current task will be added to the task queue. If there is no task currently executing, the code added to the task queue will be executed immediately. If there is currently a code segment being executed, the newly added task will only be executed after the code segment is executed.

Similarly, setTimeout() also has a return ID, and you can also use this numerical ID to cancel the timeout call. The corresponding cancellation method is clearTimeout().

Here, we use the timeout calling method to copy the code that is repeatedly executed in the intermittent call:

var num=0;
function increNum(){
 num++;
 if(num<=10){
  setTimeout(increNum,500);
 }else{
  alert('over');
 }
}
setTimeout(increNum,500);

This program can also complete repeated operations and terminate the operation after 10 times. The difference from the above setInterval() is that it does not use the returned numerical ID.

Because setInterval() is executed repeatedly, there will always be a numerical ID returned, so this numerical ID must be tracked all the time, and setTimeout() will no longer be executed after it is executed, so we do not need to track the returned numerical ID. This brings us certain convenience.

Moreover, the latter intermittent call may be called before the previous intermittent call ends. This situation will happen when the execution time of the function is longer than the intermittent call time, so to sum up, use setTimeout() is a better way to simulate intermittent calls.

Of course, there is no big problem in using setInterval() in relatively simple programs (I suddenly remembered a sentence, existence is reasonable~~~~).