programming javascript

Làm cách nào để xóa setInterval trong Javascript?

Chúng ta đã học cách chạy mã JavaScript định kỳ n giây một lần. Bây giờ trong hướng dẫn này, chúng ta sẽ xem cách ngăn phương thức setInterval[] của JavaScript chạy mã hoặc hàm của chúng ta sau một thời gian nhất định

JavaScript có phương thức clearInterval[] ngăn phương thức setInterval thực thi mã JavaScript bên trong phương thức setInterval. Nhưng vấn đề là phương thức này sẽ ngay lập tức dừng phương thức setInterval. Chúng tôi muốn mã của mình bằng phương thức setInterval ít nhất trong vài giây và sau đó, nó sẽ dừng hành vi định kỳ của nó

Đặt hình ảnh mặc định cho URL hình ảnh bị hỏng hoặc không khả dụng trong JavaScript

Vâng, có một giải pháp. Chúng tôi sẽ sử dụng phương thức JavaScript setTimeout sẽ làm chậm quá trình chạy phương thức clearInterval[] của chúng tôi trong vài giây. Trong ví dụ này, chúng tôi sẽ trì hoãn việc gọi phương thức clearInterval[] của chúng tôi trong 12 giây. Vì vậy, sau 12 giây, phương thức setInterval của chúng tôi ngừng chạy đi chạy lại mã. Dưới đây là mã JavaScript của chúng tôi

  // Get the Interval ID
var setInterval_ID = setInterval[my_alert_func, 2000];

function my_alert_func[]
{
  alert['I am an alert message appear in every 3 seconds'];
}

  // Set timeout to call stop_interval function after 12 seconds
  setTimeout[stop_interval, 12000];

  function stop_interval[]
  {
  	clearInterval[setInterval_ID];
  }

Nếu chúng tôi chạy đoạn mã trên, thì nó sẽ chạy thông báo cảnh báo của chúng tôi và sau 12 giây, phương thức setInterval[] sẽ ngừng chạy thông báo cảnh báo và chúng tôi sẽ không thể xem thông báo cảnh báo nữa

Sao chép văn bản vào khay nhớ tạm khi nhấp bằng JavaScript

Tắt nhấp chuột phải, sao chép, cắt trên trang web bằng jQuery

Trên thực tế, setInterval[] trả về một khoảng IN, mà chúng ta chuyển hai clearInterval[] để ngăn phương thức setInterval đó chạy mã. Do đó, chúng tôi có thể dừng phương thức setInterval[] chạy mã JavaScript của mình sau một thời gian nhất định hoặc sau vài giây

Khoảng thời gian JavaScript được đặt, sử dụng hàm setInterval[]. Nó có thể được định nghĩa đơn giản là một phương thức cho phép bạn gọi các hàm trong các khoảng thời gian đã đặt

Hàm JS setInterval[] tương tự như phương thức setTimeout. Họ khác nhau như thế nào? . Tuy nhiên, với phương pháp đặt khoảng thời gian, bạn có thể gọi chúng nhiều lần

Giả sử bạn cần hiển thị một thông báo cho khách truy cập trang web của mình cứ sau 3 giây. Bằng cách áp dụng chức năng JavaScript setInterval[], bạn sẽ có thể thực hiện nhiệm vụ này và kết hợp một tính năng mới trên trang web của mình

Tuy nhiên, chúng tôi khuyên bạn không nên lạm dụng chức năng này vì nó có thể làm gián đoạn trải nghiệm chung của người dùng. Ví dụ mã sau đây cho thấy cách thông báo được đặt hiển thị cứ sau 3 giây

Sao chép ví dụ

setInterval[[] => {
  alert["Hello"]; 
}, 3000];

Dùng thử trực tiếp Tìm hiểu trên Udacity

ưu

Thiết kế đơn giản [không có thông tin không cần thiết]
Các khóa học chất lượng cao [ngay cả những khóa học miễn phí]
Tính năng đa dạng

Những đặc điểm chính

chương trình cấp bằng nano
Thích hợp cho doanh nghiệp
Giấy chứng nhận hoàn thành trả tiền

LOẠI TRỪ. GIẢM GIÁ 75%

ưu

Dễ điều hướng
Không có vấn đề kỹ thuật
Có vẻ quan tâm đến người dùng của nó

Những đặc điểm chính

Rất nhiều khóa học đa dạng
chính sách hoàn tiền trong 30 ngày
Giấy chứng nhận hoàn thành miễn phí

THẤP NHƯ 12. 99$

ưu

Trải nghiệm người dùng tuyệt vời
Cung cấp nội dung chất lượng
Rất minh bạch với giá cả của họ

Những đặc điểm chính

Giấy chứng nhận hoàn thành miễn phí
Tập trung vào các kỹ năng khoa học dữ liệu
Lịch học linh hoạt

GIẢM GIÁ 75%

Cú pháp để làm theo

Xem đoạn mã dưới đây. Đây là cú pháp của hàm mà bạn cần lưu ý

var myVar;
function myFunction[] {
  myVar = setInterval[every2sec, 2000];
}

function every2sec[] { 
  alert["Alert Text!"]; 
}
myFunction[];

Như bạn có thể thấy, JavaScript setInterval[] có thể chứa ba tham số. Cái đầu tiên xác định chức năng nào sẽ được áp dụng trong các khoảng thời gian đã đặt. Như bạn có thể mong đợi, bạn cũng nên bao gồm mili giây để đặt tần suất cho chức năng của mình. Ngoài ra, bạn có thể chỉ định các tham số cho chức năng được áp dụng

Tham sốMô tảchức năngBắt buộc. Xác định chức năng để chạy. mili giây bắt buộc. Xác định tần suất chức năng sẽ được thực thi [tính bằng mili giây]. thông số_một, thông số_hai,. Không yêu cầu. Xác định bất kỳ tham số chức năng bổ sung nào

Ghi chú. Bất kỳ khoảng thời gian nào được xác định là ngắn hơn 10 mili giây sẽ tự động được thay đổi thành 10

Dừng chức năng

Trong một số trường hợp, bạn có thể cần phải làm cho JavaScript ngừng setInterval[] không được thực thi trước khi đến lúc. Bạn sẽ cần sử dụng phương pháp clearInterval[]. Nó có nghĩa là dừng bộ hẹn giờ được đặt bằng cách sử dụng hàm JavaScript setInterval

setInterval[] trả về một biến được gọi là ID khoảng thời gian. Sau đó, bạn có thể sử dụng nó để gọi hàm clearInterval[], theo yêu cầu của cú pháp

var idVar = setInterval[[] => { 
   timer[]
}, 1000];

function timer[] {
   var dateVar = new Date[];
   var time = dateVar.toLocaleTimeString[];
   document.getElementById["clock"].innerHTML = time;
};

Bản thân clearInterval[] không có giá trị trả về. kết quả duy nhất đạt được là làm cho JavaScript dừng setInterval[] chạy

Mã ví dụ để phân tích

Để có trải nghiệm học tập hiệu quả hơn, chúng tôi bao gồm các ví dụ mã hữu ích mà bạn có thể thực hành bằng cách sử dụng hàm JavaScript setInterval

Ví dụ bên dưới hiển thị cảnh báo bật lên cứ sau 2 giây

Sao chép ví dụ

var myVar;
function myFunction[] {
  myVar = setInterval[every2sec, 2000];
}

function every2sec[] { 
  alert["Alert Text!"]; 
}
myFunction[];

Dùng thử trực tiếp Tìm hiểu trên Udacity

Bây giờ, ví dụ tiếp theo này tìm một phần tử HTML có ID

var idVar = setInterval[[] => { 
   timer[]
}, 1000];

function timer[] {
   var dateVar = new Date[];
   var time = dateVar.toLocaleTimeString[];
   document.getElementById["clock"].innerHTML = time;
};

5 và thay đổi văn bản của nó để hiển thị thời gian hiện tại mỗi giây. Nói cách khác, nó hoạt động giống như một chiếc đồng hồ kỹ thuật số

Sao chép ví dụ

var idVar = setInterval[[] => { 
   timer[]
}, 1000];

function timer[] {
   var dateVar = new Date[];
   var time = dateVar.toLocaleTimeString[];
   document.getElementById["clock"].innerHTML = time;
};

Dùng thử trực tiếp Tìm hiểu trên Udacity

Mặc dù ví dụ tiếp theo này hoạt động chính xác như ví dụ trên, nhưng nó có phương thức

var idVar = setInterval[[] => { 
   timer[]
}, 1000];

function timer[] {
   var dateVar = new Date[];
   var time = dateVar.toLocaleTimeString[];
   document.getElementById["clock"].innerHTML = time;
};

6. Nếu bạn chạy chức năng này, nó sẽ dừng đồng hồ

Sao chép ví dụ

var idVar = setInterval[[] => { 
  timer[] 
}, 1000];

function timer[] {    
  var dateVar = new Date[];    
  var time = dateVar.toLocaleTimeString[];         
  document.getElementById["clock"].innerHTML = time;
}
 
function myStopFunction[] {
  clearInterval[idVar];
}

Dùng thử trực tiếp Tìm hiểu trên Udacity

Bạn có thể sử dụng mã trong ví dụ bên dưới để sửa đổi chiều rộng của một phần tử được chỉ định cho đến khi phần tử đó có chiều rộng chính xác là 100px

Sao chép ví dụ

function move[] {  
  var elem = document.getElementById["moveBar"];   
  var width = 0;  
  var idVar = setInterval[change, 10];  

function change[] {    
  if [width == 100]{
     clearInterval[idVar]
  } 
  else {      
     width++;        
     elem.style.width = width + '%';      
  }  
 }
}

Dùng thử trực tiếp Tìm hiểu trên Udacity

Ví dụ cuối cùng của chúng ta chuyển đổi màu nền từ vôi sang đỏ cho đến khi hàm

var idVar = setInterval[[] => { 
   timer[]
}, 1000];

function timer[] {
   var dateVar = new Date[];
   var time = dateVar.toLocaleTimeString[];
   document.getElementById["clock"].innerHTML = time;
};

7 được thực thi