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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
JavaScript方法和技巧大全
Dec 27 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
小程序实现左滑删除效果
Jul 25 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模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
JavaScript 继承详解 第一篇
2009/08/30 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jquery $("#variable") 循环改变variable的值示例
2014/02/23 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
用vue写一个日历
2020/11/02 Javascript
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
快速查询Python文档方法分享
2017/12/27 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
浅谈Python中的私有变量
2018/02/28 Python
Python基于百度云文字识别API
2018/12/13 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Python如何转换字符串大小写
2020/06/04 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
财务会计岗位职责
2015/02/03 职场文书
学校教学工作总结2015
2015/05/19 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Python办公自动化之Excel(中)
2021/05/24 Python
php修改word的实例方法
2021/11/17 PHP
MySQL创建定时任务
2022/01/22 MySQL
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS