Browser compatibility analysis of setTimeout and setInterval

Source: Internet
Author: User

When we accidentally tested the compatibility of the AJAXRequest browser, we found that the AJAXRequest. update method has problems in IE in some cases. After testing, we found that it is a problem of setTimeout and setInterval.
The problem occurs when AJAXRequest is called. in the update method, if the update interval and the number of updates are involved, a problem will occur in IE. The specific manifestation is that function work is performed when the update interval is involved, when the number of updates is added, the function cannot stop execution after the specified number of updates.
After testing several examples, the problem is found. In IE, setTimeout and setInterval do not support parameter passing.
Demo address: http://www.xujiwei.cn/demo/usetimer/
In the JavaScript reference of Netscape, find the setTimeout syntax as follows:
Copy codeThe Code is as follows:
SetTimeout
Evaluates an expression or calla function once after a specified number of milliseconds elapses.
Syntax
SetTimeout (expression, msec)
SetTimeout (function, msec, arg1,..., argN)
Parameters
Expression A string containing a JavaScript expression.
Msec A numeric value or numeric string, in millisecond units.
Function Any function.
Arg1,..., argN (Optional) The arguments, if any, passed to function.

The second method is to define a timer. During function execution, the parameter defined when setTimeout is called is passed to the function. However, this method is not supported in IE, that is, when the function is executed, the function does not receive these parameters. Example:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function show (str ){
Alert ("my site:" + str );
}
SetTimeout (show, 100, "www.xujiwei.cn ");
</Script>

In Firefox and Opera, the prompt box displayed in the browser correctly displays the string "my site: www.xujiwei.cn", while in IE, the prompt is "my site: undefined ", the show function does not receive the str parameter, so it is displayed as an undefined variable.
Of course, if the variable used inside the function is a global variable, you do not need to consider these issues, such:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function show (){
// The url is a global variable and the function is correctly executed.
Alert ("my site:" + url );
}
Var url = "www.xujiwei.cn ";
SetTimeout (show, 100 );
</Script>

This code works normally in IE and Firefox and displays "my site: www.xujiwei.cn ".
When the variable is a global variable, you can use the statement segment to call setTimeout, that is, use the first Syntax:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function show (str ){
// The url is a global variable and the function is correctly executed.
Alert ("my site:" + str );
}
Var url = "www.xujiwei.cn ";
SetTimeout ("show (url);", 100 );
</Script>

Because the variable url is a global variable, the timer executes the defined statement segment "show (url);" to pass the parameter correctly, but if the url is not a global variable but a local variable, an error occurs in the execution result:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function show (str ){
// The url is a global variable and the function is correctly executed.
Alert ("my site:" + str );
}
Function test (){
Var url = "www.xujiwei.cn ";
SetTimeout ("show (url);", 100 );
}
Test ();
</Script>

In this case, an error occurs. When the function test is executed, the url is prompted to be undefined. When the defined statement segment "show (url);" is executed, the context has been removed from the function test, the url is defined in the test function. Therefore, when the test function is executed, the variable url has been released.
If you want to use a local variable in setTimeout and solve the problem that setTimeout in IE does not support parameter transfer, you can use an anonymous function, that is, to define an anonymous function when setTimeout is called, perform the operations originally required in this function.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function show (str ){
// The url is a global variable and the function is correctly executed.
Alert ("my site:" + str );
}
Function test (){
Var url = "www.xujiwei.cn ";
SetTimeout (function () {show (url) ;}, 100 );
}
Test ();
</Script>

In the preceding example, an anonymous function is defined when setTimeout is called. Its function body is "show (url);" because the function has been defined, so when the timer calls this function, the variable url is still referenced, because some functions can be correctly executed and the string "my site: www.xujiwei.cn" is displayed ".
In general, pay attention to the following points when using setTimeout or setInterval:
1. If the timer is defined as an expression, then the variables should be global variables or a direct value, rather than local variables.
2. When defining a timer, if it is a defined call function, you should write only the function name, but not the brackets. If it is added, the return value is defined.
3. parameters cannot be passed when the timer is used in IE.
4. If you want to pass parameters when using a timer in IE, you can use an anonymous function to call the previously called function in the function body.

If any error occurs, please correct it.

Related Article

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.