SetTimeout and SetInterval differences _javascript skills in different browsers

Source: Internet
Author: User
Tags setinterval
。 (Novice may think that settimeout and setinterval are JavaScript functions, which is wrong.) Beginners can easily confuse JavaScript object functions with Dom object methods. )

First a piece of code, you can guess what the results will be in various browsers?
Copy Code code 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")

What I'm going to explore here is not when to use it, but about the differences between the two methods in each browser.
Originally I did not think these two methods will have what oolong, a chance to let me know, now tidy up and write to share with you.
Because settimeout and setinterval parameters and usage is the same, but the function is different, so, for the sake of convenience, I only take settimeout as an example to illustrate and examples.
The most frequently used form of settimeout is probably the following 2 types:
Copy Code code as follows:

Itimerid = settimeout (Strjscode,)//strjscode for a string containing the JS code
Itimerid = settimeout (objfunction,)//objfunction as a function object

The first invocation is to pass the string containing the JS code, the advantage of this way is concise, but the disadvantage is inefficient operation, and not conducive to parsing, there are potential risks, more importantly, dealing with more complex content is difficult, this point and eval is consistent with the drawbacks.
Therefore, we believe that it is generally appropriate to use the second method of invocation as well. (In the following example, I use the 2nd invocation method)

Now let's find out 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 my tune"!
Firefox (3.0), the final figure is not specific, sometimes 0, sometimes a negative number, the problem is later.
(i) the settimeout in IE series
First, let's look at what the DHTML Reference Manual in Microsoft says:
SetTimeout method
Evaluates a expression after a specified number of milliseconds has elapsed.
Syntax
Itimerid = Window.settimeout (Vcode, Imilliseconds [, Slanguage])
Parameters
Vcode Required. Variant that specifies the function pointer or string that indicates
The code to is executed 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.
MSDN Notes on SetTimeout:
http://msdn.microsoft.com/en-us/library/ms536753 (vs.85). aspx
That is, settimeout receives 3 parameters, and the 3rd parameter represents the type of scripting language, which is meaningless if you pass in more arguments.
Therefore, in IE, the following two kinds are right.
SetTimeout (' Alert (1) ', 50);
SetTimeout (' MsgBox ') terminate, retry, ignore, you see do it. ", Vbabortretryignore + VbDefaultButton2," Tell You "', M, ' VBScript ');
(ii) settimeout in the Mozilla series
Let's look at what the Gecko DOM Reference manual says in the Mozilla official website:
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, no difference, from the third parameter is different.
Because at present only IE browser support multiple language script, other browsers only support JS script, so do not need to pass the language type of parameters.
Mozilla passes the 3rd and more subsequent arguments passed to SetTimeout to the previous Func as arguments, in turn.
So are Firefox, Opera, Safari, Chrome, and so on.
But note that Mozilla says his family's settimeout has a bug called "lateness" argument.
"Lateness" argument
Functions invoked by SetTimeout are passed a extra "lateness" argument in Mozilla,
i.e., the lateness of the timeout in milliseconds. (For the bug 10637 and Bug 394769.)
This is the beginning of the example, Firefox (3.0) under the root of a black dragon number.
A description of settimeout on Mozilla:
Https://developer.mozilla.org/en/DOM/window.setTimeout
(iii) settimeout in other browser series (Opera, Safari, Chrome)
The same as in the Mozilla series, but there is no more than one parameter bug in the Mozilla series.

Martial Art: Tips for using settimeout
(1) The call function pass parameter in IE to the settimeout
The above analysis shows that IE is not supported in the settimeout to the called function parameters, for the sake of the harmony of the browser world, we can wrap the function call parameters into the new anonymous function. Example:
Copy Code code 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 settimeout called function is executed when the context is global, not the context when the SetTimeout method is invoked. So, when the function of the first parameter of settimeout is executed, it points to window, and if you need to keep this when you call the SetTimeout method, then you need to pass this in. Example:
Copy Code code 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 I have to say.
Post is not mental life, in fact, physical work, organization of words, writing examples, typesetting, these no technical content is the most tiring of the most time-consuming.

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.