Khám phá bộ hẹn giờ JavaScript

Khi viết mã JavaScript, bạn có thể muốn trì hoãn việc thực thi một hàm. Tìm hiểu cách sử dụng setTimeout và setInterval để lập lịch các chức năng trong tương lai

setTimeout()

Khi viếtJavaScriptmã, bạn có thể muốn trì hoãn việc thực thi một hàm.

Đây là công việc củasetTimeout. Bạn chỉ định một hàm gọi lại để thực thi sau và một giá trị thể hiện cách bạn muốn nó chạy sau này, tính bằng mili giây:

setTimeout(() => {
  // runs after 2 seconds
}, 2000)

setTimeout(() => { // runs after 50 milliseconds }, 50)

Cú pháp này xác định một chức năng mới. Bạn có thể gọi bất kỳ hàm nào khác mà bạn muốn trong đó hoặc bạn có thể chuyển một tên hàm hiện có và một tập hợp các tham số:

const myFunction = (firstParam, secondParam) => {
  // do something
}

// runs after 2 seconds setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeouttrả về id bộ hẹn giờ. Điều này thường không được sử dụng, nhưng bạn có thể lưu trữ id này và xóa nó nếu bạn muốn xóa thực thi chức năng đã lên lịch này:

const id = setTimeout(() => {
  // should run after 2 seconds
}, 2000)

// I changed my mind clearTimeout(id)

Độ trễ bằng 0

Nếu bạn chỉ định thời gian chờ trễ thành0, hàm gọi lại sẽ được thực thi càng sớm càng tốt, nhưng sau khi thực hiện hàm hiện tại:

setTimeout(() => {
  console.log('after ')
}, 0)

console.log(’ before ')

sẽ inbefore after.

Điều này đặc biệt hữu ích để tránh chặn CPU trong các tác vụ chuyên sâu và cho phép các chức năng khác được thực thi trong khi thực hiện một phép tính nặng, bằng cách xếp hàng các chức năng trong bộ lập lịch.

Một số trình duyệt (IE và Edge) triển khai mộtsetImmediate()phương pháp thực hiện cùng chức năng chính xác này, nhưng nó không chuẩn vàkhông khả dụng trên các trình duyệt khác. Nhưng đó là một hàm tiêu chuẩn trong Node.js.

setInterval()

setIntervallà một chức năng tương tự nhưsetTimeout, với sự khác biệt: thay vì chạy hàm gọi lại một lần, hàm sẽ chạy mãi mãi, vào khoảng thời gian cụ thể mà bạn chỉ định (tính bằng mili giây):

setInterval(() => {
  // runs every 2 seconds
}, 2000)

Chức năng trên chạy 2 giây một lần trừ khi bạn yêu cầu nó dừng lại, sử dụngclearInterval, chuyển cho nó id khoảng thời gian đósetIntervaltrả lại:

const id = setInterval(() => {
  // runs every 2 seconds
}, 2000)

clearInterval(id)

Gọi là thông thườngclearIntervalbên trong hàm gọi lại setInterval, để cho phép nó tự động xác định xem nó nên chạy lại hay dừng lại. Ví dụ: mã này chạy một cái gì đó trừ khi App.somethingIWait có giá trịarrived:

const interval = setInterval(() => {
  if (App.somethingIWait === 'arrived') {
    clearInterval(interval)
    return
  }
  // otherwise do things
}, 100)

Đệ quy setTimeout

setIntervalbắt đầu một hàm sau mỗi n mili giây, mà không cần cân nhắc về thời điểm một hàm kết thúc quá trình thực thi của nó.

Nếu một hàm luôn mất cùng một khoảng thời gian, thì tất cả đều ổn:

setInterval working fine

Có thể hàm cần thời gian thực thi khác nhau, tùy thuộc vào điều kiện mạng, ví dụ:

setInterval varying duration

Và có thể một lần thực thi dài sẽ chồng lên lần thực thi tiếp theo:

setInterval overlapping

Để tránh điều này, bạn có thể lên lịch setTimeout đệ quy được gọi khi hàm gọi lại kết thúc:

const myFunction = () => {
  // do something

  setTimeout(myFunction, 1000)
}

setTimeout( myFunction() }, 1000)

để đạt được kịch bản này:

Recursive setTimeout

setTimeoutsetIntervalcó sẵn trongNode.js, thông quaMô-đun hẹn giờ.

Node.js cũng cung cấpsetImmediate(), tương đương với việc sử dụngsetTimeout(() => {}, 0), chủ yếu được sử dụng để làm việc với Vòng lặp sự kiện Node.js.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: