setTimeout trên chức năng không đồng bộ

Question

Tôi có chức năng không đồng bộ mà tôi muốn có độ trễ 5000ms trước khi bị kích hoạt. Tôi đang cố gắng sử dụng setTimeout() để đạt được điều này. Hàm async này xảy ra trong một vòng lặp chạy nhiều lần, với hàm async được truyền dữ liệu khác nhau mỗi lần, do đó không thể sử dụng setInterval() ở đây.

Vấn đề: Chức năng async được kích hoạt ngay lập tức mà không chậm trễ (console in 5 Done điệp instantly` và lặp mà không dán đoạn gì đã xảy ra, và làm thế nào tôi có thể giải quyết nó

Javascript Mã

.?

someFunction(listings, function() { 
    for (var i in listings) { 
     var listing = listings[i]; 
     setTimeout(asyncFunction(listing, function(data) { 
      console.log('Done'); 
     }), 5000); 
    } 
}); 

Answer 1

Bạn phải bọc hàm trong một hàm khác. Hiện tại, bạn đang gọi hàm và chuyển giá trị trả về làm đối số cho setTimeout. tly) chuyển một hàm đến setTimeout. Sau 5 giây, hàm sẽ thực thi.

Tôi phải thêm hai chức năng để đạt được hành vi mong muốn, do các vấn đề về phạm vi. Sau 5 giây, vòng lặp đã kết thúc và biến số listing sẽ bằng với phần tử cuối cùng trong listings.

someFunction(listings, function() { 
    var counter = 0; // Define counter for 5 second-delays between each call 
    for (var i in listings) { 
     var listing = listings[i]; 
     (function(listing){ //Closure function 
      setTimeout(function(){ //setTimeout function 
       // Because of the closure, `listing` is unique 
       asyncFunction(listing, function(a, b) { 
        console.log('Done'); 
       }); 
      }, 5000 * ++counter); //Increase counter for each loop 
     })(listing); 
    } 
}); 

Answer 2

đó là điểm khác biệt. Điểm chính là asyncFunction làm gì? bạn có thể dán nó ra không?

var foo=function(){ 
    alert("BAR"); 
    return function(){ 
     alert("I AM!"); 
    }; 
} 
setTimeout(foo(),4000); 
setTimeout(foo,5000); 

Answer 3

Không biết asyncFunction của bạn có vẻ như chỉ đơn giản trả về hàm bạn đã vượt qua.

someFunction(listings, function() { 
    for (var i = 0; i < listings.length; ++i) { 
     setTimeout(asyncFunction(listings[i], function(data) { 
      console.log('Done'); 
     }), 5000 * i); 
    } 
}); 

function asyncFunction(lstng, func) { 
    return func; 
} 

Mặc dù tôi hy vọng rằng bạn cần kết thúc một số logic bổ sung.

function asyncFunction(lstng, func) { 
    return function() { 
     // do some stuff with the listing 

     // then invoke the func 
     func(); 
    } 
} 

Bây giờ asyncFunction kết thúc tốt đẹp của bạn bất cứ điều gì là cần thiết trong một chức năng mới được trả lại cho setTimeout. Hàm mới cũng gọi ra gọi lại mà bạn đã chuyển.

---

JSFIDDLE DEMO

Answer 4

Nếu bạn đang sử dụng ECMAScript6 bạn có thể sử dụng Promise.

Vì vậy, tạo một hàm sự chậm trễ đó quấn cuộc gọi đến setTimeout thành một Promise:

function delay(ms) { 
    return new Promise(function (resolve) { return setTimeout(resolve, ms); }); 
}; 

Và bạn có thể sử dụng nó như thế:

someFunction(listings, function() { 
    for (var i in listings) { 
     var listing = listings[i]; 
     delay(5000).then(() => { 
      return asyncFunction(listing); 
     }).then(() => { 
      console.log('Done'); 
     }); 
    } 
}); 

Nếu bạn đang sử dụng ECMAScript 2017 bạn có thể sử dụng aync/await.

Hàm không đồng bộ trả về lời hứa để bạn không phải thay đổi mã của hàm chậm trễ.

async someFunction(listings, function() { 
    for (var i in listings) { 
     var listing = listings[i]; 
     await delay(5000); 
     await asyncFunction(listing); 
     console.log('Done'); 
    } 
});