精解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实现加入收藏夹的代码
Oct 24 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
layui实现三级导航菜单
Jul 26 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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 MVC
2014/09/10 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
谈谈JS中的!!
2017/12/07 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
javascript实现移动端轮播图
2020/12/09 Javascript
Python图像灰度变换及图像数组操作
2016/01/27 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python 获取项目根路径的代码
2019/09/27 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
简单的Python人脸识别系统
2020/07/14 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
2014年六一儿童节演讲稿
2014/05/23 职场文书
主要负责人任命书
2014/06/06 职场文书
2014年超市工作总结
2014/11/19 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书