30/09/2018, 16:58

Thắc mắc- Hàm sleep trong javascript?

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);
}
Đinh Quốc Hân viết 19:07 ngày 30/09/2018

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);
}

Buồn Lắm viết 19:04 ngày 30/09/2018

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

thanks bạn

Đinh Quốc Hân viết 19:14 ngày 30/09/2018

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);
}
Buồn Lắm viết 19:02 ngày 30/09/2018

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

Đinh Quốc Hân viết 19:05 ngày 30/09/2018

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

Lập Trình Sư viết 19:02 ngày 30/09/2018

@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.

Buồn Lắm viết 18:59 ngày 30/09/2018

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

Nguyễn Minh Dũng viết 18:59 ngày 30/09/2018

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

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ị đơ.

Tom Nguyen viết 19:14 ngày 30/09/2018

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

Buồn Lắm viết 19:15 ngày 30/09/2018

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

Nguyễn Minh Dũng viết 19:00 ngày 30/09/2018

dùng cách khác set delay được rùi

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

Quang Duong viết 19:12 ngày 30/09/2018

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. ^^
Nguyễn Minh Dũng viết 19:04 ngày 30/09/2018

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

Đạ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ỏ.

không biết quote code vậy có đúng ko

Đúng rồi

Quang Duong viết 19:05 ngày 30/09/2018

Đạt không thích cách này lắm.

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

Nguyễn Minh Dũng viết 19:02 ngày 30/09/2018

Mà cũng ko biết tại sao nó lại đơ ta

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.

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

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

Quang Duong viết 19:02 ngày 30/09/2018

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.

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.

Luận Trần Công viết 19:14 ngày 30/09/2018

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!

Bài liên quan
0