精解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 相关文章推荐
Jquery 扩展方法
May 06 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
python实现单向链表详解
2018/02/08 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python框架django项目部署相关知识详解
2019/11/04 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python