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中dequeue()方法用法实例
Dec 29 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
javascript每日必学之封装
Feb 23 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
详解vue项目首页加载速度优化
Oct 18 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
JS实现扫雷项目总结
May 19 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下将XML转换为数组
2010/01/01 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
Vue.use源码分析
2017/04/22 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
python爬取天气数据的实例详解
2020/11/20 Python
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
世界读书日的活动方案
2014/08/20 职场文书
普通党员整改措施
2014/10/24 职场文书
2014年度安全工作总结
2014/12/04 职场文书
校本研修个人总结
2015/02/28 职场文书
慰问信格式规范
2015/03/23 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL