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 add event remove event
Apr 07 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
通过url查找a元素并点击
Apr 09 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
js预加载图片方法汇总
Jun 15 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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 全角转半角实现代码
2010/05/16 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
Python中为什么要用self探讨
2015/04/14 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Python操作mongodb的9个步骤
2018/06/04 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python getopt模块使用实例解析
2019/12/18 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
烹调加工管理制度
2014/02/04 职场文书
团队拓展活动总结
2014/08/27 职场文书
市级三好生竞选稿
2015/11/21 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python