esegue la funzione successiva dopo setTimeout fatto

Question

Come farlo funzionare? aiuto di pls.

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

prima() viene eseguito come ultima funzione, ho bisogno come prima

Fiddle qui: JSFIDDLE

Answer 1

io non sono sicuro perché stai facendo questo, ma se si desidera eseguire loro in modo sincrono, è possibile effettuare la chiamata 2 ° e 3 ° funzione all'interno 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

Se si desidera isolare le funzioni, provare questo. Si passa in un callback alla funzione first e quando si esaurisce il timer, viene richiamato tale richiamata. In tale callback è possibile chiamare second() e 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

alcuni problemi: Il tuo first funzione (e il resto di loro, se è per questo) non stanno tornando promesse, quindi non è possibile utilizzare done. Se stavi usando le promesse, done sigillerebbe la promessa e non ti permetterebbe di incatenare un'altra chiamata done. Per questa configurazione, si sarebbe meglio nidificazione vostra funzione chiama come:

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

Prova questo ..

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

Non è necessario jquery del differita quando è possibile utilizzare JavaScript promises invece.

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>

Un altro modo di eseguire l'ultima riga first().then(second).then(third); è rendendolo

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

che si può fare poiché si sa il secondo e terzo funzioni sono funzioni sincrone a differenza del prima funzione che è asincrona.

EDIT: Il motivo dietro l'utilizzo di una promessa javascript o nella risposta di guest271314 un jquery differito è perché se si voleva riutilizzare prima ma chiamare qualcosa oltre al primo o al secondo dopo averlo fatto in una parte diversa del codice si poteva semplicemente scrivere qualcosa per l'effetto di

first().then(function() { 
    fourth(); 
    fifth(); 
}); 

E lo si scriverà senza modificare la funzione per prima. Promesse e posticipati rendono il codice asincrono più riutilizzabile.

EDIT:

È ora possibile anche provare async/await attesa della promessa timeout prima di eseguire prima seconda e terza.

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

Prova utilizzando $.Deferred() all'interno first, tornare $.Deferred() jQuery promessa quando setTimeout Completa, chiamare second, third entro .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

prova:

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