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 放大镜 放大倍率和视窗尺寸
May 09 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
mailto的使用技巧分享
Dec 21 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
JS创建对象的写法示例
Nov 04 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php实现的SESSION类
2014/12/02 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
jquery实现简单自动轮播图效果
2020/07/29 jQuery
Python 正则表达式(转义问题)
2014/12/15 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
介绍下WebSphere的安全性
2013/01/31 面试题
设计专业毕业生求职信
2014/06/25 职场文书
计算机实训报告范文
2014/11/05 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android
vue中div禁止点击事件的实现
2022/04/02 Vue.js