Differences between setTimeout and setInterval in different browsers_javascript skills

. (Newbies may think that setTimeout and setInterval are javascript functions, which is wrong. Newbies can easily confuse javascript object functions with DOM object methods.)

Let’s start with a piece of code. Guess what it looks like under various browsers. What will the result be?

Copy code The code is as follows:

function f(){
var s = ' arguments.length:' arguments.length '; ';
for(var i=0,n=arguments.length;i< n;i ){
s = ' [' i ']:' arguments[ i] '; ​​';
}
alert(s);
}
setTimeout(f,500,"javascript","AAA")

I am here What we want to discuss is not when to use which one, but the differences between these two methods in each browser.
Originally, I never thought that these two methods would have any consequences. I learned about them by chance. Now I have sorted them out and written them down to share with you.
Because the parameters and usage of setTimeout and setInterval are the same, but the functions are different, so to save trouble, I will only use setTimeout as an example to explain and give examples.
The most commonly used forms of setTimeout are probably as follows:

Copy code The code is as follows:

iTimerID = setTimeout(strJsCode, 50) //strJsCode is a string containing js code
iTimerID = setTimeout(objFunction, 50) //objFunction is a function object

The first calling method is to pass a string containing js code. The advantage of this method is that it is concise, but the disadvantage is that it has poor operating efficiency, is not conducive to syntax analysis, has potential risks, and more importantly, the processing is more complicated. The content is more laborious, which is consistent with the disadvantages of eval.
So, we believe that it is usually better to use the second method of calling. (My examples below all use the second calling method)

Now let’s reveal the results of the first piece of code under various browsers:
IE(6,7,8) is: arguments. length:0;
Opera(6,7,8) is: arguments.length:2; [0]:javascript; [1]:AAA;
Firefox(3.0) is: arguments.length:3; [0]:javascript; [1]:AAA; [2]:-15;
There is such a big difference, it is really "you sing your song, I hum mine"!
Under Firefox (3.0), the last number obtained is not specific. Sometimes it is 0, sometimes it is a negative number. We will discuss this issue later.
(1) setTimeout in the IE series
First, let’s take a look at what the DHTML reference manual published by Microsoft says:
setTimeout Method
Evaluates an expression after a specified number of milliseconds has elapsed .
Syntax
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
Parameters
vCode Required. when the specified interval has elapsed.
iMilliSeconds Required. Integer that specifies the number of milliseconds.
sLanguage Optional. String that specifies one of the following values:
JScript Language is JScript.
VBScript Language is VBScript.
JavaScript Language is JavaScript.
Instructions on setTimeout on MSDN:
http://msdn.microsoft.com/en-us/library/ms536753(VS.85).aspx
In other words, setTimeout receives 3 parameters. The third parameter indicates the type of scripting language. If you pass in more parameters, it is meaningless.
So, in IE, both of the following are correct.
setTimeout('alert(1)', 50);
setTimeout('msgbox "Terminate, retry, ignore, it's up to you.", vbAbortRetryIgnore vbDefaultButton2, "Tell you"', 50, ' VBScript');
(2) setTimeout in the Mozilla series
Let’s take a look at what the Gecko DOM Reference manual on the Mozilla official website says:
window.setTimeout
Summary
Executes a code snippet or a function after specified delay.
Syntax
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);
The first two parameters are the same, there is no difference, but the third parameter is different.
Because currently only IE browser supports scripts in multiple languages, other browsers only support js scripts, so there is no need to pass language type parameters.
Mozilla passes the third and subsequent parameters passed to setTimeout to the previous func as parameters in sequence.
The same is true for Firefox, Opera, Safari, Chrome, etc.
But I noticed that Mozilla said that its setTimeout has a bug called "Lateness" argument.
"Lateness" argument
Functions invoked by setTimeout are passed an extra "lateness" argument in Mozilla,
i.e., the lateness of the timeout in milliseconds. (See bug 10637 and bug 394769.)
This is the source of an own number in Firefox (3.0) in the example at the beginning.
Instructions on setTimeout on Mozilla:
https://developer.mozilla.org/en/DOM/window.setTimeout
(3) setTimeout in other browser series (Opera, Safari, Chrome)
Basically the same as the one in the Mozilla series, but there is no bug with one extra parameter in the Mozilla series.

Wulin Gaiden: Tips for using setTimeout
(1) Calling setTimeout in IE Function passing parameters
From the above analysis, we can see that IE does not support passing parameters to the called function in setTimeout. For the sake of harmony in the browser world, we can wrap the function calling parameters into a new anonymous function. Example:

Copy code The code is as follows:

function f(a){
alert (a);
}
// setTimeout(f,50,'hello'); //For non-IE
setTimeout(function(){f('hello')},50); //General
var str='hello';
setTimeout(function(){f(str)},50); //General

(2)this question
The context when the function called by setTimeout is executed is the global context, not the context when the setTimeout method is called. Therefore, when the function with the first parameter of setTimeout is executed, its this points to the window. If you need to retain this when calling the setTimeout method, you need to pass this in. Example:

Copy code The code is as follows:

function Person(name){
this.name=name;
var f=function(){alert('My name is ' this.name)};
// setTimeout (f,50); //Error
var THIS=this;
setTimeout(function(){f.apply(THIS)},50); //Correct, universal
setTimeout(function() {f.call(THIS)},50); //Correct, universal
}
new Person('Jack');

That's all.
Posting is not a mental job, it is actually a physical job, organizing text, writing examples, and formatting. These non-technical things are the most tiring and time-consuming.