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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python numpy格式化打印的实例
2018/05/14 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
django实现后台显示媒体文件
2020/04/07 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
python调用百度API实现人脸识别
2020/11/17 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
绩效工资分配方案
2014/01/18 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
初二英语教学反思
2016/02/15 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL