如何将参数传递给setTimeout（）回调？

最新推荐文章于 2025-02-25 16:32:58 发布

p15097962069

最新推荐文章于 2025-02-25 16:32:58 发布

阅读量1.6k

点赞数

文章标签： javascript parameters callback settimeout

原文链接：https://sv.sofbug.com/question/4zju

版权

本文讨论了在JavaScript中如何正确地将参数传递给`setTimeout`回调函数，强调了不应使用字符串而应使用函数。文章提供多种解决方案，包括使用匿名函数、`bind`方法、闭包等，同时也解释了为何不能使用字符串以及IE浏览器的特殊考虑。

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

我有一些如下的JavaScript代码：

function statechangedPostQuestion()
{
  //alert("statechangedPostQuestion");
  if (xmlhttp.readyState==4)
  {
    var topicId = xmlhttp.responseText;
    setTimeout("postinsql(topicId)",4000);
  }
}

function postinsql(topicId)
{
  //alert(topicId);
}

我收到一个topicId的错误，在使用setTimeout()函数之前一切都在工作。

我希望一段时间后调用postinsql(topicId)函数。我该怎么办？

#1楼

setTimeout(function() {
    postinsql(topicId);
}, 4000)

您需要将匿名函数作为参数而不是字符串作为参数，后一种方法甚至不符合ECMAScript规范，但浏览器比较宽松。这是正确的解决方案，在使用setTimeout()或setInterval() ，永远不要依赖于将字符串作为“函数”传递，它速度较慢，因为必须对其进行评估，而且这样做是不对的。

更新：

正如Hobblin在对问题的评论中所说，现在您可以使用Function.prototype.bind()将参数传递给setTimeout中的Function.prototype.bind()

例：

setTimeout(postinsql.bind(null, topicId), 4000);

#2楼

更换

 setTimeout("postinsql(topicId)", 4000);

与

 setTimeout("postinsql(" + topicId + ")", 4000);

或更妙的是，用匿名函数替换字符串表达式

 setTimeout(function () { postinsql(topicId); }, 4000);

编辑：

Brownstone的注释不正确，这将按预期运行，如在Firebug控制台中运行该注释所展示的

(function() {
  function postinsql(id) {
    console.log(id);
  }
  var topicId = 3
  window.setTimeout("postinsql(" + topicId + ")",4000); // outputs 3 after 4 seconds
})();

请注意，我与其他人保持一致，您应该避免将字符串传递给setTimeout因为这将在字符串上调用eval()而不是传递一个函数。

#3楼

我想你要：

setTimeout("postinsql(" + topicId + ")", 4000);

#4楼

经过研究和测试之后，唯一正确的实现是：

setTimeout(yourFunctionReference, 4000, param1, param2, paramN);

setTimeout会将所有其他参数传递给您的函数，以便可以在此处对其进行处理。

匿名函数可以用于非常基本的东西，但是在必须使用“ this”的对象实例中，没有办法使其起作用。任何匿名函数都会将“ this”更改为指向窗口，因此您将丢失对象引用。

#5楼

这是一个非常老的问题，答案已经是“正确的”，但我想我想提到的是这里没有人提及的另一种方法。这是从出色的下划线库复制并粘贴的：

_.delay = function(func, wait) {
  var args = slice.call(arguments, 2);
  return setTimeout(function(){ return func.apply(null, args); }, wait);
};

您可以将任意数量的参数传递给setTimeout调用的函数，并且作为附加的奖励（通常是奖励），调用setTimeout时，传递给函数的参数的值将被冻结，因此，如果它们改变了值在setTimeout（）被调用和它超时之间的某个时间点，好吧...这不再那么令人沮丧了：)

这是一个小提琴，在这里您可以了解我的意思。

#6楼

@Jiri Vetyska感谢您的帖子，但是您的示例中有问题。我需要将悬停的目标传递给超时的函数，然后尝试了您的方法。在IE9中测试-无法正常工作。我也做了一些研究，看来是指出这里的第三个参数是正在使用的脚本语言。没有提及其他参数。

因此，我按照@meder的回答并使用以下代码解决了我的问题：

$('.targetItemClass').hover(ItemHoverIn, ItemHoverOut);

function ItemHoverIn() {
 //some code here
}

function ItemHoverOut() {
    var THIS = this;
    setTimeout(
        function () { ItemHoverOut_timeout(THIS); },
        100
    );
}
function ItemHoverOut_timeout(target) {
    //do something with target which is hovered out
}

希望这对其他人有用。

#7楼

霍布林（Hobblin）已经对这个问题发表了评论，但这确实是一个答案！

使用Function.prototype.bind()是最干净，最灵活的方法（具有设置this上下文的额外好处）：

setTimeout(postinsql.bind(null, topicId), 4000);

#8楼

我如何解决这个阶段？

就像这样：

setTimeout((function(_deepFunction ,_deepData){
    var _deepResultFunction = function _deepResultFunction(){
          _deepFunction(_deepData);
    };
    return _deepResultFunction;
})(fromOuterFunction, fromOuterData ) , 1000  );

setTimeout等待对函数的引用，因此我在一个闭包中创建了它，该闭包解释了我的数据并返回了一个包含我的数据实例的函数！

也许您可以改善这一部分：

_deepFunction(_deepData);

// change to something like :
_deepFunction.apply(contextFromParams , args);

我在chrome，firefox和IE上测试了它，并且执行良好，我不了解性能，但是我需要它能正常工作。

样本测试：

myDelay_function = function(fn , params , ctxt , _time){
setTimeout((function(_deepFunction ,_deepData, _deepCtxt){
            var _deepResultFunction = function _deepResultFunction(){
                //_deepFunction(_deepData);
                _deepFunction.call(  _deepCtxt , _deepData);
            };
        return _deepResultFunction;
    })(fn , params , ctxt)
, _time) 
};

// the function to be used :
myFunc = function(param){ console.log(param + this.name) }
// note that we call this.name

// a context object :
myObjet = {
    id : "myId" , 
    name : "myName"
}

// setting a parmeter
myParamter = "I am the outer parameter : ";

//and now let's make the call :
myDelay_function(myFunc , myParamter  , myObjet , 1000)

// this will produce this result on the console line :
// I am the outer parameter : myName

也许您可以更改签名以使其更加合规：

myNass_setTimeOut = function (fn , _time , params , ctxt ){
return setTimeout((function(_deepFunction ,_deepData, _deepCtxt){
            var _deepResultFunction = function _deepResultFunction(){
                //_deepFunction(_deepData);
                _deepFunction.apply(  _deepCtxt , _deepData);
            };
        return _deepResultFunction;
    })(fn , params , ctxt)
, _time) 
};

// and try again :
for(var i=0; i<10; i++){
   myNass_setTimeOut(console.log ,1000 , [i] , console)
}

最后回答原始问题：

 myNass_setTimeOut( postinsql, 4000, topicId );

希望能对您有所帮助！

ps：对不起，但英语不是我的母语！

#9楼

最近，我遇到了需要在循环中使用setTimeout的特殊情况。了解这一点可以帮助您了解如何将参数传递给setTimeout 。

方法1

根据Sukima的建议，使用forEach和Object.keys ：

var testObject = {
    prop1: 'test1',
    prop2: 'test2',
    prop3: 'test3'
};

Object.keys(testObject).forEach(function(propertyName, i) {
    setTimeout(function() {
        console.log(testObject[propertyName]);
    }, i * 1000);
});

我推荐这种方法。

方法2

使用bind ：

var i = 0;
for (var propertyName in testObject) {
    setTimeout(function(propertyName) {
        console.log(testObject[propertyName]);
    }.bind(this, propertyName), i++ * 1000);
}

JSFiddle： http : //jsfiddle.net/MsBkW/

方法3

或者，如果您不能使用forEach或bind ，请使用IIFE ：

var i = 0;
for (var propertyName in testObject) {
    setTimeout((function(propertyName) {
        return function() {
            console.log(testObject[propertyName]);
        };
    })(propertyName), i++ * 1000);
}

方法4

但是，如果您不关心IE <10，则可以使用Fabio的建议：

var i = 0;
for (var propertyName in testObject) {
    setTimeout(function(propertyName) {
        console.log(testObject[propertyName]);
    }, i++ * 1000, propertyName);
}

方法5（ES6）

使用块范围的变量：

let i = 0;
for (let propertyName in testObject) {
    setTimeout(() => console.log(testObject[propertyName]), i++ * 1000);
}

尽管我仍然建议在ES6中将Object.keys与forEach使用。

#10楼

我知道它已经很老了，但我想在此添加我的（首选）口味。

我认为实现此目的的一种很topicId方法是将topicId传递给一个函数，该函数进而使用参数在内部引用主题ID。即使topicId不久将更改外部的topicId ，此值也不会更改。

var topicId = xmlhttp.responseText;
var fDelayed = function(tid) {
  return function() {
    postinsql(tid);
  };
}
setTimeout(fDelayed(topicId),4000);

或简称：

var topicId = xmlhttp.responseText;
setTimeout(function(tid) {
  return function() { postinsql(tid); };
}(topicId), 4000);

#11楼

由于IE中的第三个optonal参数存在问题，并且使用闭包阻止我们更改变量（例如，在循环中）并仍然达到所需的结果，因此，我建议以下解决方案。

我们可以尝试像这样使用递归：

var i = 0;
var hellos = ["Hello World1!", "Hello World2!", "Hello World3!", "Hello World4!", "Hello World5!"];

if(hellos.length > 0) timeout();

function timeout() {                
    document.write('<p>' + hellos[i] + '<p>');
    i++;
    if (i < hellos.length)
        setTimeout(timeout, 500);
}

我们需要确保没有其他改变这些变量，并确保编写适当的递归条件以避免无限递归。

#12楼

一些答案是正确的，但令人费解。

4年后，我再次回答这个问题，因为我仍然遇到过分复杂的代码来解决这个问题。有一个优雅的解决方案。

首先，在调用setTimeout时不要将字符串作为第一个参数传递，因为它有效地调用了对慢速“ eval”函数的调用。

那么我们如何将参数传递给超时函数呢？通过使用闭包：

settopic=function(topicid){
  setTimeout(function(){
    //thanks to closure, topicid is visible here
    postinsql(topicid);
  },4000);
}

...
if (xhr.readyState==4){
  settopic(xhr.responseText);
}

有些人建议在调用超时函数时使用匿名函数：

if (xhr.readyState==4){
  setTimeout(function(){
    settopic(xhr.responseText);
  },4000);
}

语法可行。但是，在调用settopic的时间（即4秒钟后）时，XHR对象可能不相同。因此，预先绑定变量很重要。

#13楼

David Meister的答案似乎照顾到在调用setTimeout（）之后但在调用匿名函数之前可能会立即更改的参数。但这太麻烦而且不是很明显。我发现了一种优雅的方法，可以使用IIFE（即称的函数表达式）来做几乎相同的事情。

在下面的示例中，将currentList变量传递给IIFE，该变量将其保存在其闭包中，直到调用延迟函数为止。即使变量currentList在显示的代码之后立即更改， setInterval()也会做正确的事情。

如果没有这种IIFE技术，则肯定会为DOM中的每个h2元素调用setTimeout()函数，但是所有这些调用将仅看到最后一个 h2元素的文本值。

<script>
  // Wait for the document to load.
  $(document).ready(function() {
  $("h2").each(function (index) {

    currentList = $(this).text();

    (function (param1, param2) {
        setTimeout(function() {
            $("span").text(param1 + ' : ' + param2 );
        }, param1 * 1000);

    })(index, currentList);
  });
</script>

#14楼

这适用于所有浏览器（IE是一个奇怪的球）

setTimeout( (function(x) {
return function() {
        postinsql(x);
    };
})(topicId) , 4000);

#15楼

在setTimeout中支持参数的最简单的跨浏览器解决方案：

setTimeout(function() {
    postinsql(topicId);
}, 4000)

如果您不介意不支持IE 9及更低版本：

setTimeout(postinsql, 4000, topicId);

setTimeout桌面浏览器兼容性

setTimeout移动浏览器兼容性

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowTimers/setTimeout

#16楼

我的答案：

setTimeout((function(topicId) {
  return function() {
    postinsql(topicId);
  };
})(topicId), 4000);

说明：

创建的匿名函数将返回另一个匿名函数。该函数可以访问最初传递的topicId ，因此不会出错。立即调用第一个匿名函数，并传入topicId ，因此延迟注册的函数可以在调用时通过闭包访问topicId 。

要么

这基本上可以转换为：

setTimeout(function() {
  postinsql(topicId); // topicId inside higher scope (passed to returning function)
}, 4000);

编辑：我看到了相同的答案，所以看看他。 但是我没有偷他的答案！ 我只是忘了看。 阅读说明，看看是否有助于理解代码。

#17楼

请注意，根据错误消息“ topicId”未定义的原因是，它在执行setTimeout时作为局部变量存在，而在对postinsql的延迟调用时不存在。变量生存期尤其要注意，尤其是在尝试将“ this”作为对象引用传递时。

听说您可以将topicId作为第三个参数传递给setTimeout函数。没有给出太多细节，但是我获得了足够的信息来使其工作，并且在Safari中成功了。我不知道它们对“毫秒错误”的含义。在这里查看：

http://www.howtocreate.co.uk/tutorials/javascript/timers

#18楼

通常，如果需要将函数作为带有特定参数的回调传递，则可以使用高阶函数。 ES6非常优雅：

const someFunction = (params) => () => {
  //do whatever
};

setTimeout(someFunction(params), 1000);

或者，如果someFunction是一阶的：

setTimeout(() => someFunction(params), 1000);

#19楼

您可以尝试像这样的“ apply（）”的默认功能，可以在数组中传递更多数量的参数作为您的要求

function postinsql(topicId)
{
  //alert(topicId);
}
setTimeout(
       postinsql.apply(window,["mytopic"])
,500);

#20楼

如果您想将变量作为参数传递，请尝试以下操作

如果要求是功能和var作为帕尔马然后尝试这个

setTimeout((param1,param2) => { 
     alert(param1 + param2);
     postinsql(topicId);
},2000,'msg1', 'msg2')

如果需求仅是变量作为参数，则尝试此

 setTimeout((param1,param2) => { alert(param1 + param2) },2000,'msg1', 'msg2')

您可以在ES5和ES6上尝试

#21楼

//这是三个非常简单明了的答案：

function fun() {
    console.log(this.prop1, this.prop2, this.prop3);
}

let obj = { prop1: 'one', prop2: 'two', prop3: 'three' };

let bound = fun.bind(obj);

setTimeout(bound, 3000);

 // or

function funOut(par1, par2, par3) {

  return function() { 

    console.log(par1, par2, par3);

  }
};

setTimeout(funOut('one', 'two', 'three'), 5000);

 // or

let funny = function(a, b, c) { console.log(a, b, c); };

setTimeout(funny, 2000, 'hello', 'worldly', 'people');

#22楼

//这是三个非常简单明了的答案：

function fun() {
    console.log(this.prop1, this.prop2, this.prop3);
}

let obj = { prop1: 'one', prop2: 'two', prop3: 'three' };

let bound = fun.bind(obj);

setTimeout(bound, 3000);

 // or

function funOut(par1, par2, par3) {

  return function() { 

    console.log(par1, par2, par3);

  }
};

setTimeout(funOut('one', 'two', 'three'), 5000);

 // or

let funny = function(a, b, c) { console.log(a, b, c); };

setTimeout(funny, 2000, 'hello', 'worldly', 'people');

#23楼

您可以通过以下方式将参数传递给setTimeout回调函数：

setTimeout（函数，毫秒，param1，param2，...）

例如。

function myFunction() {
  setTimeout(alertMsg, 3000, "Hello");
}

function alertMsg(message) {
    alert(message)
}

#24楼

setTimeout是WHAT WG定义的DOM的一部分。

https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html

您想要的方法是：

handle = self.setTimeout( handler [, timeout [, arguments... ] ] )

安排超时时间，以在超时毫秒后运行处理程序。任何参数都直接传递给处理程序。

setTimeout(postinsql, 4000, topicId);

显然，IE10支持额外的参数。或者，您可以使用setTimeout(postinsql.bind(null, topicId), 4000); ，但是传递额外的参数会更简单，这是可取的。

历史事实：在VBScript时代，在JScript中，setTimeout的第三个参数是语言，为字符串，默认为“ JScript”，但可以选择使用“ VBScript”。 https://docs.microsoft.com/zh-cn/previous-versions/windows/internet-explorer/ie-developer/platform-apis/aa741500(v%3Dvs.85）

#25楼

在现代浏览器中，“ setTimeout”接收第三个参数，该参数在计时器结束时作为参数发送到内部函数。

例：

 var hello = "Hello World"; setTimeout(alert, 1000, hello);

更多细节：