setTimeout 后的回調函數

Question

我沒有通過下面的回調得到想要的結果。 我正在嘗試編寫一個在 setTimeout 完成后執行的簡單回調，但是我看到回調函數首先執行，然后是實際函數。

我在這里缺少什么？ 得到如下結果。

doing my homework Maths
finished my homework

這是我試圖運行的代碼。

function doHomeWork(subject, callback){
setTimeout(function(){console.log("doing my homework:", subject)},500)
callback();
}

doHomeWork("Maths", function(){console.log("finished my homework");});

Answer 1

您誤解了setTimeout的用法。

您所要求的正確實現是：

function doHomeWork(subject, callback){
    setTimeout(callback,500);
    console.log("doing my homework:", subject)
}

doHomeWork("Maths", function(){console.log("finished my homework");});

當您調用doHomeWork它時，您會做兩件事（兩行代碼）： 1. 說瀏覽器添加一個回調作為新任務，在 500 毫秒后執行。 2. 打印 console.log(...)

500 毫秒后，瀏覽器將添加一個帶有將被調用的回調的新任務。

Answer 2

當您調用setTimeout()會注冊瀏覽器回調。 這並不意味着后續語句也將在稍后執行。 它們將在調用函數setTimeout()后立即執行。 當超時發生時， setTimeout()只會調用您傳遞的函數參數。 所以，如果回調需要在setTimeout()參數化函數之后執行。 最好將該調用移動到setTimeout()函數參數中。 所以，代碼看起來像

setTimeout(function() {
    //Your stuff
    callback();
}, 500);

Answer 3

如果您想在該回調之前等待，特別是如果回調是 API 調用，則創建一個單獨的函數並從該函數的setTimeout內部返回已解決的承諾，並在執行 API 調用之前使用 async await 等待該等待函數。

如果你沒有得到一些東西，那么你可以要求進一步的解釋。