Як я можу передати параметр зворотному виклику setTimeout ()?

У мене є код 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)функція була викликана через деякий час. Що я повинен зробити?

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

Вам потрібно подавати анонімну функцію як параметр замість рядка; останній метод не повинен працювати навіть за специфікацією ECMAScript, але браузери просто м'які. Це правильне рішення, ніколи не покладайтеся на те, щоб передавати рядок як "функцію" при використанні, setTimeout()або setInterval()це повільніше, тому що її потрібно оцінювати, і це просто неправильно.

ОНОВЛЕННЯ:

Як сказав Гобблін у коментарі до цього питання, тепер ви можете передавати аргументи функції всередині setTimeout, використовуючи Function.prototype.bind().

Приклад:

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

У сучасних браузерах "setTimeout" отримує третій параметр, який надсилається як параметр внутрішній функції в кінці таймера.

Приклад:

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

Детальніше:

• https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout
• http://arguments.callee.info/2008/11/10/passing-arguments-to-settimeout-and-setinterval/

Провівши деякі дослідження та тестування, єдиним правильним виконанням є:

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

setTimeout передасть всі додаткові параметри вашій функції, щоб вони могли там оброблятися.

Анонімна функція може працювати для дуже базових матеріалів, але всередині об'єкта, де вам доведеться використовувати "це", немає ніякого способу змусити її працювати. Будь-яка анонімна функція змінить "це", щоб вказати на вікно, так що ви втратите свою посилання на об'єкт.

Це дуже старе запитання з уже "правильною" відповіддю, але я подумав, що я згадаю про інший підхід, про який тут ніхто не згадував. Це скопійовано та вставлено із чудової бібліотеки підкреслення :

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

Ви можете передати скільки завгодно аргументів функції, викликаній setTimeout і як додатковий бонус (ну зазвичай бонус) значення аргументів, переданих вашій функції, заморожуються під час виклику setTimeout, тому якщо вони змінюють значення в якийсь момент між тим, коли викликається setTimeout (), і коли він закінчується, ну ... це вже не так жахливо засмучує :)

Ось загадка, де ви можете побачити, що я маю на увазі.

Нещодавно я натрапив на унікальну ситуацію необхідності використовувати setTimeoutв циклі . Розуміючи це, ви можете допомогти вам зрозуміти, як передавати параметри setTimeout.

Спосіб 1

Використовуйте 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);
}

Хоча я по- , як і раніше рекомендую використовувати Object.keysз forEachв ES6.

Гобблін вже прокоментував це питання, але це має бути справді відповідь!

Використання Function.prototype.bind()- це найчистіший і гнучкіший спосіб зробити це (з додатковим бонусом за можливість встановити thisконтекст):

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

Для отримання додаткової інформації дивіться ці посилання MDN:
https://developer.mozilla.org/en/docs/DOM/window.setTimeout#highlighter_547041 https://developer.mozilla.org/uk/docs/JavaScript/Reference/Global_Objects/Function / bind # With_setTimeout

Деякі відповіді правильні, але суперечливі.

Я відповідаю на це ще раз, через 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);
}

Синтаксис працює. Але до того часу, коли буде викликано сетопік, тобто через 4 секунди, об'єкт XHR може бути не однаковим. Тому важливо попередньо зв’язати змінні .

Моя відповідь:

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);

EDIT: Я бачив ту саму відповідь, тому подивіться на його. Але я не вкрав його відповіді! Я просто забув подивитися. Прочитайте пояснення та перевірте, чи це допомагає зрозуміти код.

Замініть

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

з

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

а ще краще замінити виразок рядка анонімною функцією

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

Редагувати:

Коментар Браунстона невірний, це працюватиме за призначенням, як показано, запустивши це в консолі Firebug

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

Зауважте, що я погоджуюся з іншими, що вам слід уникати передачі рядка, setTimeoutоскільки це зателефонує eval()на рядок і замість цього передасть функцію.

Ви можете передати параметр функції setTimeout у відповідь як:

setTimeout (функція, мілісекунд, парам1, парам2, ...)

напр.

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

function alertMsg(message) {
    alert(message)
}

Найпростіше рішення для перехресного браузера для підтримки параметрів у setTimeout:

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

Якщо ви не заперечуєте, що не підтримуєте IE 9 і новіші версії:

setTimeout(postinsql, 4000, topicId);

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

Я знаю, що минуло 10 років з того часу, як це питання було задано, але все ж, якщо ви прокрутили тут, я припускаю, що ви все ще стикаєтеся з якоюсь проблемою. Рішення Медер Омуралієв є найпростішим і може допомогти більшості з нас, але для тих, хто не хоче мати будь-якої прив'язки, ось це:

1. Використовуйте Param для setTimeout

setTimeout(function(p){
//p == param1
},3000,param1);

2. Використовувати вираз негайно викликаних функцій (IIFE)

let param1 = 'demon';
setTimeout(function(p){
    // p == 'demon'
},2000,(function(){
    return param1;
})()
);

3. Вирішення питання

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

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

Я знаю, що це старе, але я хотів додати цьому (бажаного) смаку.

Я думаю, що досить зрозумілим способом досягти цього є передача функції 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);

Відповідь Девіда Мейстера, здається, піклується про параметри, які можуть змінюватися одразу після виклику setTimeout (), але до виклику анонімної функції. Але це занадто громіздко і не дуже очевидно. Я виявив елегантний спосіб робити майже те саме, використовуючи IIFE (негайно викликаний вираз функції).

У наведеному нижче прикладі currentListзмінна передається IIFE, що зберігає її при закритті, доки не буде викликана функція затримки. Навіть якщо змінна currentListзміниться відразу після показаного коду, setInterval()воля зробить правильно.

Без цієї методики IIFE setTimeout()функція обов'язково буде викликана для кожного h2елемента в DOM, але всі ці виклики побачать лише текстове значення останнього 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>

Загалом, якщо вам потрібно передати функцію як зворотний виклик із певними параметрами, ви можете використовувати функції вищого порядку. Це досить елегантно з ES6:

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

setTimeout(someFunction(params), 1000);

Або якщо someFunctionце перший порядок:

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

Зауважимо, що причина topicId "не була визначена" за повідомленням про помилку полягає в тому, що вона існувала як локальна змінна під час виконання setTimeout, але не тоді, коли стався затриманий виклик до postinsql. Змінна тривалість життя особливо важлива, на яку слід звернути увагу, особливо при спробі чогось подібного передавати "це" як орієнтир на об'єкт.

Я чув, що ви можете передавати topicId як третій параметр функції setTimeout. Дано не багато деталей, але я отримав достатньо інформації, щоб змусити її працювати, і це успішно в Safari. Я не знаю, що вони мають на увазі про "помилку мілісекунди". Перевірте це тут:

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

Як я вирішив цей етап?

ось так :

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: вибачте, але англійська мова - це не моя рідна мова!

це працює у всіх браузерах (IE - це дивний)

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

якщо ви хочете передати змінну, так як парам дозволить спробувати це

якщо вимога є функцією та var як parmas, то спробуйте це

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

якщо вимога є лише змінними як парами, то спробуйте це

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

Ви можете спробувати це за допомогою ES5 та ES6

Ви можете спробувати функціональність 'apply ()' за замовчуванням на кшталт цього, ви можете передавати більше масиву аргументів як свою вимогу в масив

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

setTimeout - це частина 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/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/aa741500(v%3Dvs.85)

@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
}

Сподіваюся, це корисно для когось іншого.

Оскільки існує проблема з третім оптональним параметром в IE, а використання закриття заважає нам змінювати змінні (наприклад, у циклі) та все-таки досягти бажаного результату, я пропоную наступне рішення.

Ми можемо спробувати використовувати рекурсію так:

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);
}

Нам потрібно переконатися, що нічого іншого не змінює ці змінні, і щоб ми написали належну умову рекурсії, щоб уникнути нескінченної рекурсії.

// Це три дуже прості та стислі відповіді:

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');

Відповідь на питання, але простою функцією додавання з двома аргументами.

var x = 3, y = 4;

setTimeout(function(arg1, arg2) { 
      delayedSum(arg1, arg2);
}(x, y), 1000);

function delayedSum(param1, param2) {
     alert(param1 + param2); // 7
}

Ви повинні видалити лапки з setTimeOutфункціонального дзвінка так:

setTimeout(postinsql(topicId),4000);

Я думаю, ти хочеш:

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

// Це три дуже прості та стислі відповіді:

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');