Nội dung bài viết

Video học lập trình mỗi ngày

Như tiêu đề "Thật nực cười khi nói về setTimeout" bởi vì sao tôi nói về vấn đề này cho các bạn. Bởi vì 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 và vì sao nó thật nực cười.

settimer javascript

Phỏng vấn: "Bạn có biết về setTimeout không?"
Devjs: "Biết!"
Phỏng vấn: "Vậy setTimeout() có bao nhiêu tham số đầu vào?"
Devjs: "Chỉ có hai"
Phỏng vấn: "Bạn nói rõ hơn một chút đi. Có thể được điểm cộng đó."
Devjs: "Tham số đầu tiên là hàm cần truyền vào để thực thi. Tham số thứ hai là thời gian thực thi, tính bằng milisecond"
Phỏng vấn: "Bạn có muốn bổ sung gì không?"
Devjs: "...."
Phỏng vấn: "OK, tiếp là bạn biết remove một setTimeout chứ?"
Devjs: "Biết! Sử dụng ClearTimeout()"
Phỏng vấn: "Ok, tốt đấy, vậy làm thể nào để xoá multiple setTimeout?"
Devjs: "...."
Phỏng vấn: "Không sao! Giờ bạn xem đoạn mã này , xem nó ra kết quả thế nào?"

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

Devjs: "Ủa sao nó nhiều tham số thế ạ????"

Chính vì vậy tôi sẽ có bài viết này, mặc dù đơn giản thôi nhưng bạn đã quá chủ quan cho rằng javascript đơn giản... Stop do it!

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.

Hay xem ví dụ dưới đây.

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

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

//output 
anonystick.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ó. Thôi thì gắng đọc thêm Event Loop là gì?

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

Tham khảo tại: stackoverflow

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.

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

var x = 'anonystick.com';
var obj = {
  x: 'facebook.com',
  y: function(){
    console.log(this.x);
  }
};
setTimeout(obj.y, 1000);

2 - 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('anonystick.com');
setTimeout(site.sayHi, 1000);

Tóm lại

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.

Thật nực cười khi nói về setTimeout