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中Object和Function的关系的三段简单代码
Jun 27 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
原生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选项与信息函数的使用详解
2013/05/10 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
php实现记事本案例
2020/10/20 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
用Python遍历C盘dll文件的方法
2015/05/06 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python绘制雪景图
2019/12/16 Python
django model object序列化实例
2020/03/13 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
JDO的含义
2012/11/17 面试题
2014年端午节活动方案
2014/03/11 职场文书
员工趣味活动方案
2014/08/27 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
业务员岗位职责
2015/02/03 职场文书
学历证明样本
2015/06/16 职场文书
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技