uruchom następną funkcję po zakończeniu setTimeout

Question

Jak to działa? pls pomoc.

function first() { 
    setTimeout((function() { 
     $('#q').append('first <br>'); 
    }), 1000); 
} 
function second() { 
    $('#q').append('second <br>'); 
} 
function third() { 
    $('#q').append('third <br>'); 
} 
$.when(first()).done(second()).done(third()); 

pierwszy() działa jako ostatnią funkcję, muszę jako pierwszy

Fiddle tutaj: JSFIDDLE

Answer 1

Nie jestem pewien, dlaczego to robisz, ale jeśli chcesz, aby wykonać je synchronicznie, można umieścić 2. i 3. wywołanie funkcji wewnątrz setTimeout:

function first() { 
    setTimeout(function() { 
     $('#q').append('first <br>'); 
     second(); 
     third(); 
    }, 1000); 
} 
function second() { 
    $('#q').append('second <br>'); 
} 
function third() { 
    $('#q').append('third <br>'); 
} 
first(); 

Answer 2

Jeśli chcesz odizolować funkcje, spróbuj tego. Przekaż funkcję callback do funkcji first, a gdy upłynie limit czasu, wywołanie zwrotne zostanie wywołane. W tym oddzwonieniu możesz zadzwonić pod numer second() i third().

function first(callback) { 
    setTimeout(function() { 
     $('#q').append('first <br>'); 
     callback(); 
    }, 1000); 
} 
function second() { 
    $('#q').append('second <br>'); 
} 
function third() { 
    $('#q').append('third <br>'); 
} 
first(function(){ 
    second(); 
    third(); 
}); 

Answer 3

kilka problemów: Twój first funkcja (i reszta z nich, dla tej sprawy) nie wracają obietnic, więc nie można użyć done. Jeśli korzystasz z obietnic, done zapieczętuje obietnicę i nie pozwoli ci na połączenie z innym numerem done. Dla tej konfiguracji, można byłoby lepiej gniazdowania czynność wywołuje jak:

function first() { 
    setTimeout((function() { 
     $('#q').append('first <br>'); 
     second(); 
    }), 1000); 
} 
function second() { 
    $('#q').append('second <br>'); 
    third(); 
} 
function third() { 
    $('#q').append('third <br>'); 
} 

Answer 4

Spróbuj ..

function first() { 
    setTimeout((function() { 
     $('#q').append('first <br>'); 
     second(); 
     third(); 
    }), 1000); 
} 
function second() { 
    $('#q').append('second <br>'); 
} 
function third() { 
    $('#q').append('third <br>'); 
} 
first(); 

Answer 5

Nie trzeba jQuery odroczone kiedy można użyć JavaScript promises zamiast.

function first() { 
 
    return new Promise(function(resolve, reject) { 
 
    setTimeout((function() { 
 
     $('#q').append('first <br>'); 
 
     resolve("Stuff worked!"); 
 
    }), 1000); 
 
}); 
 
} 
 
function second() { 
 
    $('#q').append('second <br>'); 
 
} 
 
function third() { 
 
    $('#q').append('third <br>'); 
 
} 
 
first().then(second).then(third);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="q"></div>

Innym sposobem wykonywania ostatnią linię first().then(second).then(third); jest przez co

first().then(function() { 
    second(); 
    third(); 
}); 

które można zrobić, ponieważ wiesz, że drugi i trzeci funkcje są funkcjami synchronicznymi w przeciwieństwie do pierwsza funkcja, która jest asynchroniczna.

EDYCJA: Powodem zastosowania obietnicy javascript lub w odpowiedzi guest271314 jest jquery odroczenia, ponieważ jeśli chcesz użyć ponownie, ale najpierw wywołaj coś poza pierwszym lub drugim, po tym jak zrobisz to w innej części kodu, możesz po prostu napisać coś do skutku:

I będziesz pisać to bez zmiany funkcji na pierwszy. Obietnice i odroczenia powodują, że kod asynchroniczny jest bardziej przydatny do wielokrotnego użytku.

EDIT:

Teraz można także spróbować async/await oczekiwaniu obietnicę limitu czasu przed wykonaniem pierwszy drugi i trzeci.

function timeout (ms) { 
 
    return new Promise(res => setTimeout(res,ms)); 
 
} 
 

 
function first() { 
 
    // $('#q').append('first <br>'); 
 
    console.log("first"); 
 
} 
 

 
function second() { 
 
    // $('#q').append('second <br>'); 
 
    console.log("second"); 
 
} 
 

 
function third() { 
 
    // $('#q').append('third <br>'); 
 
    console.log("third"); 
 
} 
 

 
async function fireEvents() { 
 
    await timeout(1000); 
 
    first(); 
 
    second(); 
 
    third(); 
 
} 
 

 
console.log("started"); 
 
fireEvents().then(()=>console.log("done")); 
 
console.log("after fireEvents");

Answer 6

Spróbuj wykorzystując $.Deferred() w first, powrót $.Deferred() jQuery obietnica gdy setTimeout zakończeniu zadzwonić second, third ciągu .done()

function first() { 
 
    var d = new $.Deferred(); 
 
    setTimeout((function() { 
 
    $('#q').append('first <br>'); 
 
    d.resolve() 
 
    }), 1000); 
 
    return d.promise() 
 
} 
 

 
function second() { 
 
    return $('#q').append('second <br>'); 
 

 
} 
 

 
function third() { 
 
    return $('#q').append('third <br>'); 
 
} 
 

 
$.when(first()).done([second, third]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id='q'></div>

jsfiddle http://jsfiddle.net/hqphbhx3/1/

Answer 7

try:

function start() { 
    setTimeout((function() { 
     $.when(first()).done(second()).done(third()); 
    }), 1000); 
} 
function first() { 
    $('#q').append('first <br>'); 
} 
function second() { 
    $('#q').append('second <br>'); 
} 
function third() { 
    $('#q').append('third <br>'); 
} 

start();