JS setTimeout、setInterval传递参数总结

最新推荐文章于 2022-04-25 22:06:19 发布

LeesLee峰

最新推荐文章于 2022-04-25 22:06:19 发布

阅读量3.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/leeslee_feng/article/details/38174259

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

总结：以setTimeout为例

方法一：setTimeout( function(){func( params );}, delayTime)方式：

语法清晰，传递的参数个数自由，可传递对象、数组，但有一个缺陷：

使用同一变量名多次设置setTimeout，并且变量的值有变化，则所有的调用使用最终的参数值，而不是不同的。

方法二：setTimeout( 'func("'+ param +'")', delayTime)

通过拼接JS字符串代码的方式，可以解决方式1的不足，但参数传递时都被转换成了字符串，不能传递数组、对象。

缺点除了拼音的易错、不简洁之外，还有就是只能调用全局函数。

如果是与JQ等JS框架结合使用，不能用var func = fucntion(){}的方式定义func，去掉var，或者window.func = function(){}（JQ代码中不能用 function func(){}的方式定义函数）。

其余的方法就是重写setTimeout函数了（参考 http://www.jb51.net/article/40524.htm）

方法一的变形：

setTimeout(func2(parmas), delayTime);

func2 = function(parmas){

return function (){

func(parmas)

}

func = fucntion(params){

// code...

}

太繁琐，为了调用func，又定义了一个专门调用它的函数，不如直接在setTimeout中用匿名函数调用

setTimeout传参示例：

想输出 0、1、2...9，结果是10个10

<!DOCTYPE html>
<html>
<head>
<title>setTimeout/setInterval传参</title>
</head>
<body>
输出：
<div id="content"></div>

<script>

// 想输出 0、1、2...9，结果是10个10
var writeFunc = function(v){
  var obj = document.getElementById('content');
  obj.innerHTML += v+'<br />';
}

for(i=0;i<10;i++){
  setTimeout(function(){writeFunc(i)},1000);
}
</script>

</body>
</html>

LeesLee峰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS setTimeout、setInterval传递参数总结

总结：以setTimeout为例方法一：setTimeout( function(){func(params);}, delayTime)方式：语法清晰，传递的参数个数自由，可传递对象、数组，但有一个缺陷：使用同一变量名多次设置setTimeout，并且变量的值有变化，则所有的调用使用最终的参数值，而不是不同的。方法二：setTimeout('func(
复制链接

扫一扫