精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!


Posted in Javascript onNovember 23, 2007

在使用JScript的时候,我们有时需要间隔的执行一个方法,比如用来产生网页UI动画特效啥的。这是我们常常会使用方法setInterval或setTimeout,但是由于这两个方法是由脚本宿主模拟出来的Timer线程,在通过其调用我们的方法是不能为其传递参数。

    我们常用的使用场景是: 

window.setTimeout("delayRun()", n);  
window.setInterval("intervalRun()", n);  
window.setTimeout(delayRun, n);  
window.setInterval(intervalRun, n); 

    显然强行代参数的调用: window.setTimeout("delayRun(param)", n); 
window.setInterval("intervalRun(param)", n);  
window.setTimeout(delayRun(param), n);  
window.setInterval(intervalRun(param), n); 

    都是错误的,因为string literals形式的方法调用,param必须是全局变量(即window对象上的变量)才行;而function pointer形式的调用,完全错误了,这是把函数的返回值当成了setTimeout/setInterval函数的参数了,完全不是我们所望的事情。

    解决这个问题的办法可以使用匿名函数包装的方式,在以下scenario中我们这么做: 

function foo()  
{  
    var param = 100;  
    window.setInterval(function()  
    {  
        intervalRun(param);  
    }, 888);  
}  function interalRun(times)  
{  
    // todo: depend on times parameter  
} 
    这样一来,就可以不再依赖于全局变量向delayRun/intervalRun函数中传递参数,毕竟当页面中的全局变量多了以后,会给脚本的开发、调试和管理等带来极大的puzzle。
Javascript 相关文章推荐
js捕获鼠标滚轮事件代码
Dec 16 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
Node学习记录之cluster模块
May 31 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
Moment的feature导致线上bug解决分析
Sep 23 Javascript
document.designMode的功能与使用方法介绍
Nov 22 #Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 #Javascript
摘自百度的图片轮换效果代码
Nov 19 #Javascript
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 #Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 #Javascript
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 #Javascript
javascript实现二分查找法实现代码
Nov 12 #Javascript
You might like
PHP中的Session对象如何使用
2015/09/25 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python学习入门之区块链详解
2017/07/25 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
学习雷锋活动总结
2014/04/29 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS