setTimeout和setInterval的浏览器兼容性分析

所属分类: 网络编程 / JavaScript 阅读数: 2022
收藏 0 赞 0 分享
无意中测试AJAXRequest浏览器兼容性的时候,发现AJAXRequest.update方法在某些情况下在IE里有问题,经过测试找到是setTimeout和setInterval的问题。
问题出现在当调用AJAXRequest.update方法时,如果带了更新间隔及更新次数,那么在IE下面就会出现问题,具体表现为带了更新间隔时是函数工作,带上更新次数时函数无法在更新指定次数后停止执行。
测试几个例子之后找到了问题所在,在IE里,setTimeout和setInterval是不支持参数传递的。
演示地址:http://www.xujiwei.cn/demo/usetimer/
在Netscape的JavaScript参考中找到setTimeout的语法如下:
复制代码 代码如下:

setTimeout
Evaluates an expression or calls a function once after a specified number of milliseconds elapses.
语法
setTimeout(expression, msec)
setTimeout(function, msec, arg1, ..., argN)
参数
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.  

第二种使用方法就是定义了一个定时器,在执行时function时,将把调用setTimeout时定义的参数传递给function,但在IE中,并不支持这种方式的调用,也就是在执行function的时候,函数并没有接收到这些参数。如下面的例子:
复制代码 代码如下:

<script type="text/javascript">
function show(str) {
    alert("my site: "+str);
}
setTimeout(show,100,"www.xujiwei.cn");
</script>

在Firefox和Opera里,浏览器都能正确的弹出提示框显示字符串“my site: www.xujiwei.cn”,而在IE里,显示的则是“my site: undefined”,说明函数show并没有接收到参数str,所以显示出来就是一个未定义变量。
当然,如果在函数内部使用的变量是全局变量时,就不必要考虑这些问题,如:
复制代码 代码如下:

<script type="text/javascript">
function show() {
    // url是全局变量,函数正确执行
    alert("my site: "+url);
}
var url="www.xujiwei.cn";
setTimeout(show,100);
</script>

这段代码在IE和Firefox里都能正常工作,显示出“my site: www.xujiwei.cn”。
在变量是全局变量的情况下,可以使用语句段的方式来调用setTimeout,即使用第一种语法:
复制代码 代码如下:

<script type="text/javascript">
function show(str) {
    // url是全局变量,函数正确执行
    alert("my site: "+str);
}
var url="www.xujiwei.cn";
setTimeout("show(url);",100);
</script>

因为变量url是全局变量,因此定时器执行所定义的语句段“show(url);”能正确传递参数,但是如果url不是全局变量,而是一个局部变量时,执行结果就会出错了:
复制代码 代码如下:

<script type="text/javascript">
function show(str) {
    // url是全局变量,函数正确执行
    alert("my site: "+str);
}
function test() {
    var url="www.xujiwei.cn";
    setTimeout("show(url);",100);
}
test();
</script>

此时就会出错了,在函数test执行时,会提示url未定义,在执行定义的语句段“show(url);”时,上下文已经脱离了函数test,而url是在函数test内部定义的,所以在执行函数test的时候,变量url已经释放了。
如果要在setTimeout里面使用局部变量,并且解决在IE里的setTimeout不支持参数传递的问题,可以使用匿名函数,即在调用setTimeout时定义一个匿名函数,在这个函数内部进行原来需要进行的操作。
复制代码 代码如下:

<script type="text/javascript">
function show(str) {
    // url是全局变量,函数正确执行
    alert("my site: "+str);
}
function test() {
    var url="www.xujiwei.cn";
    setTimeout(function(){show(url);},100);
}
test();
</script>

在上面的例子中,调用setTimeout时定义了一个匿名函数,它的函数体是“show(url);”,因为已经定义了函数,所以在定时器调用这个函数时,变量url还是有引用的,因些函数可以正确执行,显示出字符串“my site: www.xujiwei.cn”。
总的来说,使用setTimeout或者setInterval时需要注意以下几点:
1. 定义定时器时如果是使用的表达示,那么其中的变量应该是全局变量,或者是一个直接的值,而不能是局部变量。
2. 定义定时器时如果是定义的调用函数,那么应该只写函数名,而不能加括号,如果加了就是定义返回值了。
3. 在IE里使用定时器时不能传递参数。
4. 如果要在IE里使用定时器时传递参数,可以使用匿名函数,在函数体中调用原来该调用的函数。

如有错误还请指正。
更多精彩内容其他人还在看

layui table 复选框跳页后再回来保持原来选中的状态示例

今天小编就为大家分享一篇layui table 复选框跳页后再回来保持原来选中的状态示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue-Cli项目优化操作的实现

这篇文章主要介绍了Vue-Cli项目优化操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题

这篇文章主要介绍了解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题,本文给大家总结的非常详细,需要的朋友可以参考下
收藏 0 赞 0 分享

vue 父组件通过v-model接收子组件的值的代码

这篇文章主要介绍了vue 父组件通过v-model接收子组件的值的代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue 全局环境切换问题

小编在开发使经常会碰到全局切换问题,今天小编给大家带来一篇教程给大家介绍vue 全局环境切换问题,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

element-ui 本地化使用教程详解

这篇文章主要介绍了element-ui 本地化使用教程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

在Vue项目中,防止页面被缩放和放大示例

今天小编就为大家分享一篇在Vue项目中,防止页面被缩放和放大示例,具有很好的参考 价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue h5移动端禁止缩放代码

今天小编就为大家分享一篇vue h5移动端禁止缩放代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue 3.0双向绑定原理的实现方法

这篇文章主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

nest.js 使用express需要提供多个静态目录的操作方法

这篇文章主要介绍了nest.js 使用express需要提供多个静态目录的操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多