JavaScript中setTimeout和setInterval函数的传参及调用


Posted in Javascript onMarch 11, 2016

如何向 setTimeout 、 setInterval 传递参数
看如下代码:

var str = 'aaa'; 
var num = 2; 
function auto(num){ 
  alert(num); 
} 
setTimeout('auto(num)',4000);

这样写是可以正常工作的,但是如其说这是参数传递,还不如说是直接使用的全局变量。所以,这种写法是没有必要的,一般情况下更多的是用到传递局部变量作为参数。

把代码修改一下:

//var str = 'aaa'; 
var num = 2; 
function test(){ 
  var str = 'bbb'; 
  setTimeout('auto(str)',4000); 
} 
function auto(a){ 
  alert(a); 
} 
test();

这种写法会报错,如果把取消对 str 的全局声明的注释,就会输出 aaa,即函数依然是调用全局变量。
看下面的代码:

//var str = 'aaa'; 
var num = 2; 
function test(){ 
  var str = 'bbb'; 
  setTimeout('auto("str")',4000); 
} 
function auto(a){ 
  alert(a); 
} 
test();

注意上面的 str ,这样写会输出 “str”,也就是说定时器调用函数后,是把 str 直接当作了参数。这样传递的参数永远是字符串。这不是我们想要的结果。

要想传递除字符串意外的参数,可以使用闭包,看下面代码:

//var str = 'aaa'; 
var num = 2; 
function test(){ 
  var str = 'bbb'; 
  setTimeout(auto(str),4000); 
} 
function auto(str){ 
  return function(){ 
    alert(str); 
  } 
} 
test();

输出结果为 ‘bbb',如果给auto(str)加上引号同样会报错。
当然,这样写也是不错的:

var num = 2; 
function test(){ 
  var str = 'bbb'; 
  //setTimeout(auto(str),4000); 
  setTimeout(function(){alert(str)},4000); 
} 
function auto(str){ 
  return function(){ 
    alert(str); 
  } 
} 
test();

最后需要注意的是,字不使用闭包传递参数时,定时器调用的函数是要加引号的,不加引号,会报错。以上情形同样适合 setInterval();

setTimeout 、 setInterval 中的函数调用
有如下代码:

var num = 2; 
function auto(){ 
  alert(num); 
} 
setTimeout(auto(),4000);

在这段程序里,测试的时候立刻就可以看到弹出的警告框。也就是说按照以上方法引用函数,定时器是不起作用的。

同样,对于setInterval上面的写法也不能正常工作,程序只能弹出一次警告框,然后报错。
把定时器改为

setInterval('auto()',4000); 
setTimeout('auto()',4000);

程序可以正常工作。

当不使用auto()调用函数,只使用 auto会是什么样呢?

var str = 'aaa'; 
var num = 2; 
function auto(){ 
  alert(num); 
} 
//setInterval(auto,4000); 
setTimeout(auto,4000);

这样写程序都可以正常工作;

如果给auto加上引号

//setInterval('auto',4000); 
setTimeout('auto',4000);

都不能正常工作。

Javascript 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
详解微信第三方小程序代开发
Jun 23 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 #Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 #Javascript
详解Angularjs中的依赖注入
Mar 11 #Javascript
详解AngularJS过滤器的使用
Mar 11 #Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 #Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 #Javascript
基于jQuery日历插件制作日历
Mar 11 #Javascript
You might like
中英文字符串翻转函数
2008/12/09 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
JS面向对象编程详解
2016/03/06 Javascript
实例浅析js的this
2016/12/11 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
python采用getopt解析命令行输入参数实例
2014/09/30 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
python scatter函数用法实例详解
2020/02/11 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
Python新手学习函数默认参数设置
2020/06/03 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
工程力学专业自荐信范文
2014/03/17 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
社区禁毒工作方案
2014/06/02 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
初三语文教学计划
2015/01/22 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
python实现剪贴板的操作
2021/07/01 Python