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 相关文章推荐
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
如何实现js拖拽效果及原理解析
May 08 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
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python在不同目录下导入模块的实现方法
2017/10/27 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
python实发邮件实例详解
2019/11/11 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
装修致歉信
2014/01/15 职场文书
气象学专业个人求职信
2014/03/15 职场文书
五一促销活动总结
2014/07/01 职场文书
文案策划专业自荐信
2014/07/07 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
安全先进个人材料
2014/12/29 职场文书
销售工作决心书
2015/02/04 职场文书
市场营销计划书
2019/04/24 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL