Bạn không cần phải jquery của hoãn lại khi bạn có thể sử dụng javascript promises để thay thế.
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>
Một cách khác để thực hiện các dòng cuối cùng first().then(second).then(third);
là bằng cách làm cho nó
first().then(function() {
second();
third();
});
mà bạn có thể làm kể từ khi bạn biết các chức năng thứ hai và thứ ba là chức năng đồng bộ không giống như hàm đầu tiên không đồng bộ.
EDIT: Lý do đằng sau việc sử dụng lời hứa javascript hoặc trong câu trả lời của guest271314 là vì nếu bạn muốn sử dụng lại trước nhưng gọi thứ gì đó bên cạnh thứ nhất hoặc thứ hai sau khi được thực hiện trong một phần khác của mã, bạn có thể viết một cái gì đó ảnh hưởng của
first().then(function() {
fourth();
fifth();
});
Và bạn sẽ viết mà không thay đổi chức năng đầu tiên. Lời hứa và trì hoãn làm cho mã không đồng bộ có thể tái sử dụng được.
EDIT:
Bạn có thể bây giờ cũng cố gắng async/await chờ lời hứa thời gian chờ trước khi thực hiện đầu tiên thứ hai và thứ ba.
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");
bạn đã thử viết code vào cuối trong hàm thời gian chờ bản thân? –
những setTimeout là không đồng bộ vì vậy chúng tôi không biết cái nào sẽ được thực hiện trước –