在 setInterval 函数中传递参数答案

【问题标题】：Pass parameters in setInterval function在 setInterval 函数中传递参数
【发布时间】：2010-10-02 06:02:00
【问题描述】：

请告知如何将参数传递给使用setInterval 调用的函数。

我的示例 setInterval(funca(10,3), 500); 不正确。

【问题讨论】：

语法：.setInterval(func, delay[, param1, param2, ...]);

【解决方案1】：

您需要创建一个匿名函数，以便不会立即执行实际函数。

setInterval( function() { funca(10,3); }, 500 );

【讨论】：

动态参数应该是什么？
@rony36 - 你可能想要一个为你创建间隔计时器的函数。将参数传递给函数，以便在函数闭包中捕获其值并在计时器到期时保留。 function createInterval(f,dynamicParameter,interval) { setInterval(function() { f(dynamicParameter); }, interval); } 然后将其称为createInterval(funca,dynamicValue,500); 显然您可以将其扩展为多个参数。并且，请使用更具描述性的变量名称。 :)
@tvanfosson：很棒的答案！你知道如何清除within函数funca的区间形式吗？
@tvanfosson 谢谢。我的错，但我实际上是指您在评论部分给出的 createInterval 示例。它将如何工作？我也在考虑将计时器变量作为动态参数传递，但不确定如何或是否有意义。为了清楚起见，我在这里添加了一个新问题：stackoverflow.com/questions/40414792/…
这对我有用，但为什么会这样？

【解决方案2】：

现在有了 ES5，绑定方法函数原型：

setInterval(funca.bind(null,10,3),500);

Reference here

【讨论】：

这是最好的答案，但是根据功能，它可能会出现意外行为。例如console.log.bind(null)("Log me") 将抛出 Illegal invocation，但 console.log.bind(console)("Log me") 将按预期工作。这是因为 console.log 需要 console 作为 this 参数。
迄今为止最好的答案。精益和清洁。非常感谢！
非常干净高效！
只需添加适用于 Chrome>=7、Firefox>=4.0、Explorer>=9、Opera>=11.60、Safari>=5.1（来源：developer.mozilla.org/ca/docs/Web/JavaScript/Reference/…）
@RogerVeciana 提供的 MDN 链接现在已损坏，所以这里是更新的 - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案3】：

将它们作为参数添加到 setInterval：

setInterval(funca, 500, 10, 3);

您问题中的语法使用 eval，而不是 recommended practice。

【讨论】：

哇？！从什么时候开始允许的？（严肃的问题）
不确定。我的来源是：developer.mozilla.org/en/DOM/window.setInterval
@Kev Internet Explorer 真是一团糟它不支持传递参数-.-
恕我直言，这应该是公认的答案。不错、简单、干净的解决方案。

【解决方案4】：

     setInterval(function(a,b,c){

          console.log(a + b +c);  

      }, 500, 1,2,3);

           //note the console will  print 6
          //here we are passing 1,2,3 for a,b,c arguments
         // tested in node v 8.11 and chrome 69

【讨论】：

最佳解释答案。
那么为什么将参数作为数组传递呢？这个细节甚至与问题无关。
这是我要找的，应该在上面

【解决方案5】：

您可以将参数作为函数对象的属性传递，而不是作为参数：

var f = this.someFunction;  //use 'this' if called from class
f.parameter1 = obj;
f.parameter2 = this;
f.parameter3 = whatever;
setInterval(f, 1000);

然后在您的函数someFunction 中，您将可以访问参数。这在作用域自动进入全局空间并且您丢失对调用 setInterval 的类的引用的类中特别有用。使用这种方法，上例中“someFunction”中的“parameter2”将具有正确的范围。

【讨论】：

可以通过Classname.prototype.someFunction.parameter1访问
向对象或函数添加参数可能会导致编译器变慢，因为它必须重建对象的本机代码表示（例如，如果这是在热循环中完成的）所以要小心.

【解决方案6】：

setInterval(function,milliseconds,param1,param2,...)

更新：2018 - 使用“传播”运算符

function repeater(param1, param2, param3){
   alert(param1);
   alert(param2);
   alert(param3); 
}

let input = [1,2,3];
setInterval(repeater,3000,...input);

【讨论】：

这样更好。

【解决方案7】：

你可以使用匿名函数；

setInterval(function() { funca(10,3); },500);

【讨论】：

这是一个相当昂贵的电话！
@Roylee 怎么贵？

【解决方案8】：

到目前为止，最实用的答案是 tvanfosson 给出的答案，我所能做的就是给你一个 ES6 的更新版本：

setInterval( ()=>{ funca(10,3); }, 500);

【讨论】：

你是说 ()=>{} 是 ES6 替换 function(){} 的新方法吗？有趣的。首先，我认为火箭已经过去了。而且，除非这种语法有其他常见用途，否则它非常非常奇怪。我看到它们是“肥箭”。仍然，奇怪。我想有人喜欢它，这是一个见仁见智的问题。

【解决方案9】：

引用参数就足够了：

OK --> reloadIntervalID = window.setInterval( "reloadSeries('"+param2Pass+"')" , 5000)

KO --> reloadIntervalID = window.setInterval( "reloadSeries( "+param2Pass+" )" , 5000)

注意每个参数的单引号'。

通过 IE8、Chrome 和 FireFox 测试

【讨论】：

使用 eval 是一种糟糕的做法。使用匿名函数更好。

【解决方案10】：

const designated = "1 jan 2021"

function countdown(designated_time){

    const currentTime = new Date();
    const future_time = new Date(designated_time);
    console.log(future_time - currentTime);
}

countdown(designated);

setInterval(countdown, 1000, designated);

有很多方法可以做到这一点，我个人认为这是干净和甜蜜的。

【讨论】：

【解决方案11】：

这个答案的最佳解决方案是下一段代码：

setInterval(() => yourFunction(param1, param2), 1000);

【讨论】：

【解决方案12】：

我知道这个话题太老了，但这是我在 setInterval 函数中传递参数的解决方案。

HTML：

var fiveMinutes = 60 * 2;
var display = document.querySelector('#timer');
startTimer(fiveMinutes, display);

JavaScript：

function startTimer(duration, display) {
    var timer = duration,
        minutes, seconds;

    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        --timer; // put boolean value for minus values.

    }, 1000);
}

【讨论】：

我需要在调用函数时访问一个值，但不是每秒，所以你的答案提供了这个，（例如timer），但是在这种情况下你如何clearInterval()？

【解决方案13】：

这有效setInterval("foo(bar)",int,lang);.... Jon Kleiser 引导我找到答案。

【讨论】：

【解决方案14】：

另一个解决方案是像这样传递你的函数（如果你有动态变量）： setInterval('funca('+x+','+y+')',500);

【讨论】：

【解决方案15】：

您可以使用名为 underscore js 的库。它为 bind 方法提供了一个很好的包装，并且语法也更简洁。让你在指定范围内执行函数。

http://underscorejs.org/#bind

_.bind(函数，范围，*参数)

【讨论】：

【解决方案16】：

这个问题将是使用闭包的一个很好的演示。这个想法是函数使用外部范围的变量。这是一个例子......

setInterval(makeClosure("Snowden"), 1000)

function makeClosure(name) {
var ret

ret = function(){
    console.log("Hello, " + name);
}

return ret;
}

函数“makeClosure”返回另一个函数，它可以访问外部范围变量“name”。因此，基本上，您需要将任何变量传递给“makeClosure”函数，并在分配给“ret”变量的函数中使用它们。有影响地，setInterval 将执行分配给“ret”的函数。

【讨论】：

【解决方案17】：

我在使用 Vue 应用时遇到了同样的问题。在我的情况下，这个解决方案只有在匿名函数被声明为箭头函数时才有效，关于mounted ()生命圈钩子的声明。

【讨论】：

【解决方案18】：

此外，借助 IE Support > 9，您可以在函数设置间隔内传递更多变量。例如：

function myFunc(arg1, arg2){};
setInterval(myFunc, 500, arg1, arg2);

您好！

【讨论】：