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获取textarea中的光标位置
May 06 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
JS实现横向轮播图(中级版)
Jan 18 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 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目录导航文件代码
2006/10/09 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
浅析js中的浮点型运算问题
2014/01/06 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
页面点击小红心js实现代码
2018/05/26 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
常见的python正则用法实例讲解
2016/06/21 Python
Python教程之全局变量用法
2016/06/27 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
python实现简单图书管理系统
2019/11/22 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
车间班组长岗位职责
2013/11/13 职场文书
小学毕业家长寄语
2014/01/19 职场文书
促销活动总结模板
2014/07/01 职场文书
暑期社会实践证明书
2014/11/17 职场文书
小学班级口号大全
2015/12/25 职场文书
用python画城市轮播地图
2021/05/28 Python
vue 实现上传组件
2021/05/31 Vue.js
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python