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 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
javascript 函数速查表
Feb 07 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
JavaScript实现网页留言板功能
Nov 23 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开发模式(简写版)
2007/03/15 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
php简单实现MVC
2015/02/05 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
js作用域和作用域链及预解析
2019/04/11 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python hashlib模块实例使用详解
2019/12/24 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
学生感冒英文请假条
2014/02/04 职场文书
环保主题班会教案
2015/08/13 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
Python包argparse模块常用方法
2021/06/04 Python
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL
python垃圾回收机制原理分析
2022/04/13 Python