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 输入框内容格式验证代码
Feb 11 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
js禁止表单重复提交
Aug 29 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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
桌面中心(四)数据显示
2006/10/09 PHP
透析PHP的配置文件php.ini
2006/10/09 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
代码生成器 document.write()
2007/04/15 Javascript
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
JS实现吸顶特效
2020/01/08 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
详细介绍Python中的偏函数
2015/04/27 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
个性大学生自我评价
2013/12/04 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
股份转让协议书
2014/04/12 职场文书
小学数学教研活动总结
2014/07/01 职场文书
党员十八大心得体会
2014/09/12 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
社区服务活动感想
2015/08/11 职场文书