Thắc mắc về hàm sleep trong javascript?

boyteenphonui · December 11, 2020, 4:52pm

em có hàm này. em muốn sleep trong đoạn for như chú thích em làm như thế nào ạ ?
em dùng setTimeout nhưng không được

 guitin();
function guitin(){
	for (var i = 1; i < 7; i++){	
		alert(1);  
		// sleep 1s roi chay function xoatn()
	}
}
function xoatn(){	
	alert(2);
}

dqh · April 23, 2015, 3:08am

Bạn có thể sử dụng setTimeout mà:


guitin();
function guitin(){
	for (var i = 1; i < 7; i++){	
		alert(1);  
		setTimeout(xoatn(), 1000);
	}
}
function xoatn(){	
	alert(2);
}

boyteenphonui · April 23, 2015, 3:02am

Khong được bạn á.
bạn thử chạy trong console xem

thanks bạn

dqh · April 23, 2015, 3:08am

Mình đã thử và thành côn đoạn này:

guitin();
function guitin(){
	for (var i = 1; i < 7; i++){	
		alert(1);  
		setTimeout(xoatn(), 1000);
	}
}
function xoatn(){	
	alert(2);
}

boyteenphonui · April 23, 2015, 3:21am

sao bên mình nó không sleep đc ta. nó chạy liên tục bạn ơi

dqh · April 23, 2015, 3:22am

Mình sử dụng ff ok cả bạn. bạn thử chỉnh sau 5s xem chạy có đúng ko.

laptrinhio · April 23, 2015, 4:50am

@kayz hướng dẫn đúng rồi đó, setTimeout() mà tiến thôi , là hàm chuẩn từ ES1.0 nên chạy đc tất cả các browser từ cổ nhất tới xịn nhất.

boyteenphonui · April 23, 2015, 6:56am

mình dùng chrome và ff nó cũng ko chạy bạn ơi. hình như for và setTimeout không chạy với nhau.
bạn thử lấy code trên chạy trong console xem nó sleep đc ko bạn

ltd · April 23, 2015, 7:00am

Javascript thiết kế không sử dụng sleep. Mỗi hàm phải thực thi xong và trả control về cho browser. Nếu không mình sẽ thấy browser bị đơ.

manhapt · April 23, 2015, 8:10am

Thực ra dùng từ delay đúng hơn, hiển thị giao diện nó từ từ cảm giác đẹp hơn

boyteenphonui · April 23, 2015, 1:19pm

hi. cảm ơn các bạn :D. mình làm đc rùi. hàm for và setTimeout không chạy đc với nhau. nhưng mình không dùng for nữa dùng cách khác set delay được rùi

ltd · April 23, 2015, 2:06pm

Có thể chia sẻ với mọi người ở đây không?

quangduong109 · April 23, 2015, 4:35pm

Mình chia sẻ với mọi người 2 cách mình tìm hiểu được để giải quyết vấn đề trên, mong có thể giúp ích được cho mọi người.

Cách 1: sử dụng setTimeout

Do function setTimeout là async nên mình không thể gọi trực tiếp trong vòng for được. Do đó mình để xuất giải pháp như phía dưới:

var i = 1;
guitin();
function guitin () {
    alert('1');
    setTimeout(function () {
        alert('2');
        i++;
        if (i < 7) {
            guitin();
        }
    }, 1000)
}

Hoặc:

(function guitin (i) {
    alert('1');
    setTimeout(function () {
        alert('2');          //  your code here
        if (--i) guitin(i);      //  decrement i and call myLoop again if i > 0
    }, 1000)
})(7);

Tham khảo: http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop

Cách 2 viết một hàm sleep:


    guitin();
    function sleep(milliseconds) {
        var start = new Date().getTime();
        for (var i = 0; i < 1e7; i++) {
            if ((new Date().getTime() - start) > milliseconds){
                break;
            }
        }
    }
    function guitin(){
        for (var i = 1; i < 7; i++){
            alert(1);
            sleep(1000);
            xoatn();
        }
    }
    function xoatn(){
        alert(2);
    }

Tham khảo http://www.sitepoint.com/delay-sleep-pause-wait/

Mình mới tham gia diễn đàn nên còn bỡ ngỡ, không biết quote code vậy có đúng ko, mong được góp phần xây dựng diễn đàn lớn mạnh hơn. ^^

ltd · April 24, 2015, 1:15am

Đạt không thích cách này lắm. Hồi trước Đạt cũng từng dùng nhưng vì nó làm đơ browser nên Đạt bỏ.

Đúng rồi

quangduong109 · April 24, 2015, 1:26am

Uh, mình cũng chưa dùng nên ko biết thế nào. Mà cũng ko biết tại sao nó lại đơ ta, bạn có thể giải thích được cho mình và mọi người biết được không.
Theo mình thì bạn kia làm set delay thì chắc cũng viết một hàm tương tự như hàm sleep này ^^, ko biết có phải ko, hehe

ltd · April 24, 2015, 1:36am

Vì hàm này nó sẽ đếm i liên tục từ 0 tới 1e7 hoặc cho đến khi thời thời gian hiện tại - thời gian bắt đầu đã vượt qua thời gian cần chờ.

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
            break;
        }
    }
}

Việc này dĩ nhiên sẽ chiếm CPU và Javascript sẽ chạy liên tục, không trả về control cho Browser.

Nếu bạn nói tới setTimeout thì đây lại là một câu chuyện khác. Đạt không làm javascript nên Đạt không dám chắc 100%. Nhưng thông thường các hàm dạng này sẽ không có sleep mà nó sẽ đăng ký một event với hệ điều hành(OS) gọi là time event.

Ví dụ, Đạt muốn code Javascript trong 5s nữa thực thi X. Thì Đạt sẽ báo với OS rằng, 5s nữa mày gửi cho tao event rằng 5s đã trôi qua. Sau đó Javascript sẽ làm công việc của nó và trả control về cho Browser.

OS sẽ có một đồng hồ riêng, dựa vào CPU tick, để tính ra thời điểm 5s kể từ khi JS đăng ký cái event này. Khi thời điểm 5s đã đến thì OS sẽ gửi một event tới, có thể là tới Brower hiện tại, để nhắc rằng sự kiện này đã xảy ra. Khi đó JS sẽ thực thi X.

Điều này sẽ chuyển việc “Chờ” đến cho OS thực hiện thông báo lại qua event. Đó là lý do tại sao hàm setTimeout là async chứ không phải là sync

quangduong109 · April 24, 2015, 1:48am

Uhm, thì nếu như làm công việc sync để sleep thì chắc chắn nó phải chiếm tài nguyên và hệ thống phải đứng chờ rồi, tại lúc nãy mình không hiểu rõ ý “đơ” của bạn, ^^.
Còn về hàm setTimeout thì nó là callback function nên chắc chắn là async rồi. Javascript ưu tiên các hàm xử lý async mà :D.

Luan_Tran_Cong · August 28, 2018, 4:35am

trường hợp khác thì mình chưa rõ lắm vì mới tìm hiểu. Nhưng để gọi xoatn() 7 lần thì trong for bạn cho nó sleep lần lượt là (1000*i) là đc mà!

guitin();
function guitin(){
	for (var i = 1; i < 7; i++){	
		alert(1);  
                setTimeout(xoatn,1000*i);
		// sleep 1s roi chay function xoatn()
	}
}
function xoatn(){	
	alert(2);
}

lần đầu mình cmt nên có gì sai mong admin và các bạn nhẹ tay!