Bạn nghĩ sao về setTimeout?

Có lẽ các bạn quá chủ quan, các bạn cho rằng bạn đã hiểu về javascript. Và đây là một tình huống mới đây thôi, tôi đã gặp. Hãy xem tình huống đó như thế nào nhé.


setTimeout(function(a,b){
   console.log(0+a+b);
},1000,3,4);

Các tham số của setTimeout ()

Như trên đa số các bạn đều cho rằng chỉ có hai tham số khi sử dụng setTimeout() mà thôi. Đúng đấy, nhưng chưa đủ, trên thực tế setTimeout() có thể nhận được nhiều tham số hơn, vậy những tham số này được sử dụng để làm gì? Bắt đầu từ tham số thứ ba, nó được sử dụng để chỉ ra các tham số được truyền vào hàm gọi lại theo trình tự. Xem vi dụ trên đó để hiểu hơn:


setTimeout(function(a,b){
   console.log(0+a+b); 
},1000,3,4);

//Output: 
7

Lưu ý: Ở đây tôi có một lưu ý nhỏ cho các bạn đó là chỉ có IE 9.0 trở xuống, chỉ cho phép hai tham số cho setTimeout, không hỗ trợ thêm tham số nào nữa.

Settimeout event loop javascript

Có bạn nào đã nghe về Event loop javascript chưa? Nếu chưa thì không phải bạn kém đâu, là do bạn ít đọc về kiến thức thôi. Ở đây, tôi sẽ không dành thời gian nói về Event Loop vì đã có bài viết qúa chi tiết, bạn có thể tìm đến nó thông qua một cú click vào link đó. Còn ở đây, tôi dành thời gian nói về setTimeout() và một số điều cơ bản cần phải biết trước khi đi vào cao siêu hơn.


setTimeout(function(){
    console.log('facebook.com');
},0);
console.log('lamsaodecode.blogspot.com');

Bạn đoán xem kết quả nó như thế nào?


//output 
lamsaodecode.blogspot.com
facebook.com

Bạn có biết vì sao không? Về lý thuyết, thời gian delay của setTimeout() có phải là 0 không? setTimeout() thực hiện nó ngay lập tức không? Bởi vì cơ chế vận hành setTimeout đã nói rằng bạn phải đợi cho đến khi tác vụ đồng bộ hóa tập lệnh hiện tại và các sự kiện trong "hàng đợi" được xử lý trước khi bạn có thể thực thi tác vụ được chỉ định bởi setTimeout.

Nói cách khác, vai trò thực sự của setTimeout là thêm một sự kiện sau sự kiện hiện có trong "hàng đợi nhiệm vụ", quy định rằng một phần mã nhất định phải được thực thi tại một thời điểm nhất định. Sự kiện được thêm bởi setTimeout sẽ được thực thi trong event loop tiếp theo. Chà, khổ nhỉ, vì các bạn chưa hiểu về Event Loop cho nên nói cũng hoi khó.

Clear all settimeout javascript

Hàm setTimeout trả về một giá trị số nguyên và được chuyển đến hàm ClearTimeout() để hủy bộ đếm thời gian tương ứng. Như cú pháp dưới đây.


var id1 = setTimeout(f,1000);  //id1 timeoutID
var id2 = setInterval(f,1000); //id2 timeoutID

clearTimeout(id1);
clearInterval(id2);

Giờ theo câu hỏi của người phỏng vấn thì làm sao chúng ta có thể xoá được nhiều setTimeout() bây giờ. Đơn giản thôi, bài viết này sẽ giúp bạn làm được điều này. Giả sử chúng ta có nhiều setTimeout() được start()


var timeouts = [];
timeouts.push(setTimeout(function(){alert(1);}, 200));
timeouts.push(setTimeout(function(){alert(2);}, 300));
timeouts.push(setTimeout(function(){alert(3);}, 400));

for (var i =0; i < timeouts.length; i++) {
  clearTimeout ( timeouts [i]);
}

Phạm vi của setTimeout()

Và đây là câu hỏi dành cho bạn, có thể tương lai là của bạn.. Câu hỏi tiếp theo của người phỏng vấn.

Cho đoạn code sau. kêt quả là gì?


var timeouts = [];
timeouts.push(setTimeout(function(){alert(1);}, 200));
timeouts.push(setTimeout(function(){alert(2);}, 300));
timeouts.push(setTimeout(function(){alert(3);}, 400));

for (var i =0; i < timeouts.length; i++) {
  clearTimeout ( timeouts [i]);
}

Cho đoạn code sau. kêt quả là gì?


function Blog(login) {
  this.login = login;
  this.sayHi = function() {
    console.log(this.login);  
  }
}
var site = new Blog('lamsaodecode.com');
setTimeout(site.sayHi, 1000);

Có thể setTimeout() đã được nói rất nhiều trên nhiều blog, setTimeout rất mạnh mẽ, hahaha. Tuy nhiên, nếu bạn không thể thành thạo nó, hãy dành thời gian cho nó một chút mỗi ngày. Chưa tìm đến những gì vĩ đại làm gì, hãy tìm những điều đơn giản trước tiên. Bời vì đa số những điều vĩ đại đến từ những điều đơn giản.
Chúc may mắn cho lần phỏng vấn tiếp theo.

Tác giả: Jos Hoàng Tiên