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 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
React Native如何消除启动时白屏的方法
Aug 08 Javascript
vue自定义filters过滤器
Apr 26 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Vue+ElementUI table实现表格分页
Dec 14 Javascript
vue设置全局访问接口API地址操作
Aug 14 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
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
基于initPHP的框架介绍
2013/04/18 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python文件处理
2016/02/29 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
校长岗位职责
2013/11/26 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
文体活动实施方案
2014/03/27 职场文书
保护环境建议书400字
2014/05/13 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
结婚典礼致辞
2015/07/28 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
Python中glob库实现文件名的匹配
2021/06/18 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python