01/10/2018, 15:35

Hỏi về vòng lặp trong javascript

em có 1 đoạn code kiểu như dưới

    var list = $('#list').val().split("
");
for(let i = 0; i < list.length; i++){
    $.post('progress.php', {v : list[i]},function(){
        // xu li khi thanh cong
    }).fail(function(){
        // xu li khi that bai
    })

    if((i+1) == list.length){
        $('#result').text('XOng!');
    }
}

nói đơn giản code này sẽ lấy giá trị người dùng nhập , sau đó tách ra thành mảng bởi dấu xuống dòng rồi gửi đến ajax xử lí. quá trình xử lí sẽ là khá lâu nhưng mà đoạn

 if((i+1) == list.length){
        $('#result').text('XOng!');
    }

thì nó lại hoạt động ngay lập tức và gán chữ Xong vào div#result trong khi ajax vẫn chưa xử lí xong hoàn toàn dữ liệu người dùng nhập. Em ko hiểu lắm, mong a/c giúp đỡ. Em cảm ơn!

Duy Hoàng viết 17:48 ngày 01/10/2018

hix ai giup em voi ak.

Son Tran viết 17:46 ngày 01/10/2018

$.post được xử lý async nên code sẽ chạy xuống cái if cuối cùng luôn.
Thông thường để xử lý dạng này mình sẽ dùng promise all: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
Nguyên tắc khá đơn giản: đẩy các promise vào 1 array, đưa array đó vào làm tham số của Promise.all(arg).
Sau khi tất cả các promise được resolve thì bạn sẽ nhận được kết quả.
Code của bạn sẽ đại loại như thế này:

const list = $('#list').val().split("\n");
let promiseList = [];
for (let v of list) {
    promiseList.push($.post('progress.php', {v}));
}
Promise.all(promiseList)
    .then(result => $('#result').text('XOng!'))
    .catch(err => {
        consle.log(err);
    });

Nếu dùng async/await thì có thể viết lại như thế này:

async submitHandle () {
    const list = $('#list').val().split("\n");
    let promiseList = [];
    for (let v of list) {
        promiseList.push($.post('progress.php', {v}));
    }
    try {
        await Promise.all(promiseList);
        $('#result').text('XOng!')
    } catch (err) {
        consle.log(err);
    }
}

Duy Hoàng viết 17:49 ngày 01/10/2018

e cảm ơn, cho e hỏi nữa là còn cách nào có thể giải quyết ngoài dùng promise ko ạ ?

Son Tran viết 17:38 ngày 01/10/2018

Bản chất của việc gọi HTTP request trong JS là promise nên bạn sẽ không né được nó đâu.

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Duy Hoàng

0 chủ đề

0 bài viết

Tác giả nổi bật