深入解析JavaScript中定时器的函数传参问题

最新推荐文章于 2022-12-07 17:05:42 发布

HHH_LLL

最新推荐文章于 2022-12-07 17:05:42 发布

阅读量855

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JS

19 篇文章

订阅专栏

本文深入探讨了在JavaScript中如何在定时器中正确传递函数参数的问题，通过实例展示了四种方法：匿名函数包装、利用闭包、使用bind()以及函数外部传参。每种方法都有其特点和适用场景，旨在确保函数能在定时器中被正确调用并接收参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看一个例子：

function f1(num){
    console.log(num);
}
setTimeout(f1(1),300);

输出：

1
//一大段错误，错误内容主要是回调必须是一个函数

这里f1(1)带有括号和参数，所以在程序运行时立即执行了一次，然后返回值自然就不是函数了。那假如我们需要去调用函数并传递参数，我们应该如何做呢。

1，使用匿名函数包装：

function f1(num){
     console.log(num);
}
setTimeout(function(){f1(1)},300);   //输出1，无错误

2，函数内使用闭包：

function f1(num){
   return function f2(){
      console.log(num);
   }
}
setTimeout(f1(1),300);    //1

3，使用bind()方法（注意bind返回的是一个函数）：

function f1(num){
     console.log(num);
}
setTimeout(f1.bind(null,1),300);   //1

4，函数外部传参：

(function(num){
    setTimeout(function(){
      console.log(num);
    },300);
})(1);   
//300毫秒后输出1