2015-05-21 33 views
10

Làm thế nào để nó hoạt động? xin giúp đỡ.chạy chức năng tiếp theo sau khi setTimeout thực hiện

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

đầu tiên() chạy chức năng như trước, tôi cần làm đầu tiên

Fiddle ở đây: JSFIDDLE

+0

bạn đã thử viết code vào cuối trong hàm thời gian chờ bản thân? –

+0

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 –

Trả lời

11

Tôi không chắc chắn lý do tại sao bạn làm điều này, nhưng nếu bạn muốn thực hiện chúng đồng bộ, bạn có thể thực hiện cuộc gọi hàm thứ 2 và thứ 3 bên trong 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(); 
0

Nếu bạn muốn cách ly các chức năng, hãy thử cách này. Bạn chuyển vào một số callback đến chức năng first và khi bộ hẹn giờ hết giờ, cuộc gọi lại đó sẽ được gọi. Trong cuộc gọi lại đó, bạn có thể gọi second()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(); 
}); 
1

Một vài vấn đề: first Chức năng của bạn (và phần còn lại của họ, cho rằng vấn đề) đều không trở về lời hứa, vì vậy bạn không thể sử dụng done. Nếu bạn đang sử dụng lời hứa, done sẽ đóng dấu lời hứa và không cho phép bạn thực hiện cuộc gọi done khác. Đối với thiết lập này, bạn sẽ khấm khá hơn làm tổ chức của bạn gọi như:

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

Hãy thử điều này ..

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

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

2

Hãy thử sử dụng $.Deferred() trong first, trở $.Deferred() jQuery lời hứa khi setTimeout hoàn tất, gọi second, third trong .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/

0

thử:

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(); 
Các vấn đề liên quan