Jak przekazać parametr do wywołania zwrotnego setTimeout ()?

W nowoczesnych przeglądarkach "setTimeout" otrzymuje trzeci parametr, który jest wysyłany jako parametr do wewnętrznej funkcji na końcu timera.

Przykład:

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

Więcej Szczegółów:

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

Po przeprowadzeniu pewnych badań i testów, jedyną poprawną implementacją jest:

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

SetTimeout przekaże wszystkie dodatkowe parametry do twojej funkcji, aby mogły być tam przetwarzane.

Funkcja anonimowa może działać dla bardzo podstawowych rzeczy, ale w przypadku obiektu, w którym musisz użyć "tego", nie ma sposobu, aby to działało. Każda funkcja anonimowa zmieni "to", aby wskazać okno, więc stracisz odniesienie do obiektu.

To bardzo stare pytanie z już "poprawną" odpowiedzią, ale pomyślałem, że wspomnę o innym podejściu, o którym nikt tu nie wspomniał. To jest skopiowane i wklejone z doskonałej underscore biblioteki:

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

Możesz przekazać dowolną liczbę argumentów do funkcji wywołanej przez setTimeout i jako dodatkowy bonus (Zwykle bonus) wartość argumentów przekazywanych do twojej funkcji jest zamrożona podczas wywoływania setTimeout, więc jeśli zmienią one wartość w pewnym momencie wskazuje pomiędzy momentem wywołania setTimeout (), a momentem wygaśnięcia, dobrze... to już nie jest takie ohydne frustrujące:)

Oto skrzypce , gdzie możesz zobaczyć, co mam na myśli.

Ostatnio natknąłem się na wyjątkową sytuację konieczności użycia setTimeout W pętli . Zrozumienie tego może pomóc ci zrozumieć, jak przekazać parametry do setTimeout.

Metoda 1

Użyj forEach i Object.keys, zgodnie z sugestią Sukima :

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

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

Polecam tę metodę.

Metoda 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/

Metoda 3

Lub jeśli nie możesz użyć forEach lub bind, użyj IIFE :

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

Metoda 4

Ale jeśli nie zależy ci na IE :

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

Metoda 5 (ES6)

Użyj zmiennej o zasięgu blokowym:

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

Chociaż nadal zalecałbym użycie Object.keys z forEach W ES6.

Hobblin już skomentował to pytanie, ale to naprawdę powinna być odpowiedź!

Użycie Function.prototype.bind() jest najczystszym i najbardziej elastycznym sposobem na to (z dodatkową zaletą możliwości ustawienia kontekstu this):

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

Aby uzyskać więcej informacji, zobacz te MDN linki:
https://developer.mozilla.org/en/docs/DOM/window.setTimeout#highlighter_547041 https://developer.mozilla.org/en/docs/JavaScript/Reference/Global_Objects/Function/bind#With_setTimeout

Niektóre odpowiedzi są poprawne, ale zawiłe.

Po pierwsze, nie przekazuj w łańcuchu jako pierwszego parametru podczas wywoływania setTimeout, ponieważ skutecznie wywołuje wywołanie powolnej funkcji "eval".

Jak więc przekazać parametr do funkcji timeout? Za pomocą zamknięcia:

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

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

Niektórzy zasugerowali użycie funkcji anonimowej podczas wywoływania funkcji timeout:

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

Składnia działa. Jednak do czasu wywołania settopic, tzn. 4 sekundy później, obiekt XHR może nie być już taki sam. Dlatego ważne jest, aby wstępnie związać zmienne .

Wiem, że minęło 10 lat, odkąd zadano to pytanie, ale nadal, jeśli przewijałeś do tego miejsca, zakładam, że nadal masz jakiś problem. Rozwiązanie Medera Omuralieva jest najprostsze i może pomóc większości z nas, ale dla tych, którzy nie chcą mieć żadnych wiązań, oto jest:]}

1. Użyj Param dla setTimeout

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

1. Użyj natychmiast wywołanego wyrażenia funkcji (IIFE)

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

1. rozwiązanie pytania

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

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

Zastąp

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

Z

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

Lub jeszcze lepiej, zastąp wyrażenie łańcuchowe funkcją anonimową

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

EDIT:

Komentarz Brownstone jest nieprawidłowy, będzie działał zgodnie z przeznaczeniem, co wykazano uruchamiając to w konsoli Firebug

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

Zauważ, że jestem w zgodzie z innymi, że powinieneś unikać przekazywania łańcucha do setTimeout, ponieważ spowoduje to wywołanie eval() na łańcuchu i zamiast tego przekaże funkcję.

Moja odpowiedź:

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

Wyjaśnienie:

Utworzona funkcja anonimowa zwraca inną funkcję anonimową. Ta funkcja ma dostęp do pierwotnie przekazanego topicId, więc nie spowoduje błędu. Pierwsza funkcja anonimowa jest wywoływana natychmiast, przechodząc w topicId, więc zarejestrowana funkcja z opóźnieniem ma dostęp do topicId w momencie wywołania, poprzez zamknięcie.

Lub

To w zasadzie zamienia się na:

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

EDIT: widziałem to samo odpowiedz, więc spójrz na jego. Ale nie ukradłem jego odpowiedzi! Zapomniałam spojrzeć. Przeczytaj wyjaśnienie i sprawdź, czy pomaga to zrozumieć kod.

Możesz przekazać parametr do funkcji wywołania zwrotnego setTimeout jako:

SetTimeout (function, milisekundy, param1, param2, ...)

Np.

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

function alertMsg(message) {
    alert(message)
}

Najprostsze rozwiązanie cross browser do obsługi parametrów w setTimeout:

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

Jeśli nie masz nic przeciwko Nie wspieraniu IE 9 i niższych:

setTimeout(postinsql, 4000, topicId);

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

Wiem, że jest stary, ale chciałem dodać do tego mój (preferowany) smak.

Myślę, że dość czytelnym sposobem na osiągnięcie tego celu jest przekazanie topicId do funkcji, która z kolei używa argumentu do wewnętrznego odwoływania się do identyfikatora tematu. Wartość ta nie ulegnie zmianie, nawet jeśli topicId Na Zewnątrz zostanie zmieniona wkrótce po tym.

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

Lub krótko:

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

Odpowiedź Davida Meistera wydaje się dbać o parametry, które mogą ulec zmianie natychmiast po wywołaniu setTimeout (), ale przed wywołaniem funkcji anonimowej. Ale to zbyt uciążliwe i mało oczywiste. Odkryłem elegancki sposób robienia prawie tego samego za pomocą IIFE (natychmiast wywołane wyrażenie funkcji).

W poniższym przykładzie zmienna currentList jest przekazywana do IIFE, która zapisuje ją w jej zamknięciu, dopóki nie zostanie wywołana funkcja opóźniona. Nawet jeśli zmienna currentList zmienia się natychmiast po wyświetleniu kodu, setInterval() zrobi właściwą rzecz.

Bez tej techniki IIFE, Funkcja setTimeout() z pewnością zostanie wywołana dla każdego elementu h2 w DOM, ale wszystkie te wywołania będą widzieć tylko wartość tekstową last h2 element.

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

Ogólnie rzecz biorąc, jeśli chcesz przekazać funkcję jako wywołanie zwrotne o określonych parametrach, możesz użyć funkcji wyższego rzędu. To jest całkiem eleganckie z ES6:

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

setTimeout(someFunction(params), 1000);

Lub jeśli someFunction jest pierwszym porządkiem:

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

Zauważ, że powodem, dla którego topicId nie był zdefiniowany dla komunikatu o błędzie jest to, że istniał jako zmienna lokalna podczas wykonywania setTimeout, ale nie wtedy, gdy miało miejsce opóźnione wywołanie postinsql. Żywotność zmiennej jest szczególnie ważna, na którą należy zwrócić uwagę, zwłaszcza gdy próbuje się czegoś takiego jak przekazanie" this " jako odniesienia do obiektu.

Słyszałem, że można przekazać topicId jako trzeci parametr do funkcji setTimeout. Nie podano zbyt wiele szczegółów, ale mam wystarczająco dużo informacji, aby uzyskać to działa, i to jest skuteczne w Safari. Nie wiem, co mają na myśli o "błędzie milisekundy". Sprawdź to tutaj:

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

Jak rozwiązałem ten etap ?

Tak po prostu:

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

SetTimeout poczekaj na odwołanie do funkcji, więc utworzyłem ją w zamknięciu, które interpretuje moje dane i zwraca funkcję z dobrą instancją moich danych !

Może uda Ci się poprawić tę część:

_deepFunction(_deepData);

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

Testowałem go na chrome, firefox i IE i działa dobrze, nie znam się na wydajności, ale potrzebowałem go do działania.

Przykładowy test:

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

Może możesz zmienić podpis dla większej zgodności:

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

I na koniec odpowiedzieć na pierwotne pytanie:

 myNass_setTimeOut( postinsql, 4000, topicId );

Ps: sorry ale angielski to nie jest mój język ojczysty !

To działa we wszystkich przeglądarkach (IE jest dziwna)

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

Jeśli chcesz przekazać zmienną jako param, wypróbuj to

Jeśli wymaganie jest funkcją i var jako parmas to spróbuj tego

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

Jeśli wymaganie jest tylko zmienną jako params to spróbuj tego

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

Możesz spróbować z ES5 i ES6

Możesz spróbować domyślnej funkcjonalności' apply () ' czegoś takiego, możesz przekazać większą liczbę argumentów jako wymaganie w tablicy

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

SetTimeout jest częścią DOM zdefiniowanego przez co WG.

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

Metoda, którą chcesz to:-

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

Ustawia limit czasu do uruchomienia obsługi po upływie milisekund. Dowolne argumenty są przekazywane bezpośrednio do obsługi.

setTimeout(postinsql, 4000, topicId);

Najwyraźniej dodatkowe argumenty są wspierane w IE10. Alternatywnie można użyć setTimeout(postinsql.bind(null, topicId), 4000);, jednak przekazanie dodatkowych argumentów jest prostsze, a to jest lepsze.

Historical factoid: w dniach VBScript, w JScript, trzecim parametrem setTimeout był język, jako ciąg znaków, domyślnie "JScript", ale z opcją użycia "VBScript". https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/aa741500(v%3Dvs.85)

Musisz usunąć cudzysłów z wywołania funkcji setTimeOut w następujący sposób:

setTimeout(postinsql(topicId),4000);

@Jiri Vetyska dzięki za post, ale coś jest nie tak w twoim przykładzie. Musiałem przekazać cel, który jest unosi się (to) do funkcji timed out i próbowałem swoje podejście. Testowany w IE9 - nie działa. Zrobiłem też trochę badań i wydaje się, że jak wskazano tutaj trzecim parametrem jest używany język skryptowy. Brak wzmianki o dodatkowych parametrach.

Więc podążałem za odpowiedzią @ meder i rozwiązałem mój problem z tym kodem:

$('.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
}

Nadzieja, to jest przydatne dla kogoś innego.

Ponieważ w IE występuje problem z trzecim parametrem optonalnym, a użycie zamknięć uniemożliwia nam zmianę zmiennych (na przykład w pętli) i osiągnięcie pożądanego rezultatu, proponuję następujące rozwiązanie.

Możemy spróbować użyć rekurencji w następujący sposób:

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

Musimy się upewnić, że nic innego nie zmienia tych zmiennych i że piszemy odpowiedni warunek rekurencji, aby uniknąć rekurencji nieskończonej.

/ / są to trzy bardzo proste i zwięzłe odpowiedzi:

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

Myślę, że chcesz:

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

/ / są to trzy bardzo proste i zwięzłe odpowiedzi:

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

ODPOWIEDŹ na pytanie, ale za pomocą prostej funkcji dodawania z 2 argumentami.

var x = 3, y = 4;

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

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