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 相关文章推荐
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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合并js请求的例子
2013/11/01 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
移动节点的jquery代码
2014/01/13 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
AI人工智能 Python实现人机对话
2017/11/13 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
2014年安全生产目标责任书
2014/07/23 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
深入浅析React中diff算法
2021/05/19 Javascript
python实现股票历史数据可视化分析案例
2021/06/10 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android