[JS] Loop Synchronous JS - Tạo Vòng lặp đồng bộ trong JS

Published on: 24 January 2019
Tags: javascript

1.Vòng lặp bất đồng bộ

Đây là vấn đề muôn thưở cho ai code JS, đặt vấn đề với trường hợp sau đây:

Trường hợp này, vòng lặp sẽ được chạy setTimeOut với time ngẫu nhiên và tất nhiên kết quả trả về không theo thứ tự của vòng lặp(0-9) 😊. Đây là một cách để JS xử lí nhanh hơn các ngôn ngữ khác, tuy nhiên ở một số trường hợp bạn cần dữ liệu được loop theo một cách đồng bộ thì lại khá bất tiện. Đây là một số cách mình tìm hiểu để giải quyết vấn đề này.

2.For kết hợp với Promise.resolve()

    for (let i = 0, p = Promise.resolve(); i < 10; i++) {
        p = p.then(_ => new Promise(resolve =>
            setTimeout(function () {
                console.log(i);
                resolve();
            }, Math.random() * 1000)
        ));
    }

3.Async/Await

    (async function loop() {
        for (let i = 0; i < 10; i++) {
            await new Promise(resolve => setTimeout(resolve, Math.random() * 1000));
            console.log(i);
        }
    })();
    const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

    (async function loop() {
        for (let i = 0; i < 10; i++) {
            await delay(Math.random() * 1000);
            console.log(i);
        }
    })();
comments powered by Disqus