Câu hỏi Ngừng cuộc gọi setInterval trong JavaScript


tôi đang dùng setInterval(fname, 10000); để gọi hàm sau mỗi 10 giây trong JavaScript. Có thể ngừng gọi nó trên một số sự kiện?

Tôi muốn người dùng có thể ngừng làm mới dữ liệu lặp lại.


1121
2017-09-20 19:29


gốc


@CherryDT - Có gì sai với câu hỏi nỗ lực bằng không và câu trả lời nỗ lực bằng không? Nếu tôi đang ở trong một căn phòng với các nhà phát triển khác và tôi nói "Này, chức năng JavaScript để dừng một setInterval là gì?" Nếu không ai biết được, họ không trả lời (ngoài việc nhún vai và nói "Tôi không nhớ ra tay"). Nếu có ai đó, họ sẽ làm. Nó tiết kiệm cho tôi một vài phút. Stack Overflow chỉ làm cho căn phòng có kích thước toàn thế giới. Nó khá ngọt ngào! Tại sao cố gắng làm cho nó chỉ có câu hỏi khó? Điều đó có vẻ ngớ ngẩn và vô nghĩa đối với tôi. - Shavais
Đừng là người ghét. - Jus10


Các câu trả lời:


setInterval() trả về một ID khoảng thời gian mà bạn có thể chuyển đến clearInterval():

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Xem tài liệu cho setInterval() và clearInterval().


1756
2017-09-20 19:30



Làm thế nào bạn có thể bắt đầu lại sau khi dừng với 'clearInterval ()'? Nếu tôi cố gắng khởi động lại nó, tôi nhận được 2x setInterval đang chạy. - Dan
Tôi cũng vậy Mỗi lần tôi muốn sử dụng SetInterval (MyFunction, 4000); nó nhận được nhanh hơn và nhanh hơn, mỗi lần 2x thời gian nhanh hơn: (làm thế nào tôi có thể khởi động lại một setinterval ?? - Alireza Masali
SetInterval () không thay đổi tốc độ mà bạn vượt qua nó. Nếu bất cứ điều gì nó đang làm tăng tốc mỗi lần bạn gọi SetInterval (), thì bạn có nhiều bộ tính giờ đang chạy cùng một lúc, và nên mở một câu hỏi mới. - EpicVoyage
Hãy chắc chắn rằng bạn đang thực sự ngăn chặn nó. Do phạm vi biến đổi, bạn có thể không có Id chính xác để gọi clearInterval. tôi đã sử dụng window.refreshIntervalId thay vì một biến cục bộ, và nó hoạt động rất tốt! - osa
tôi không thể sử dụng this bên trong fname? - Jürgen Paul


Nếu bạn đặt giá trị trả về của setInterval với một biến, bạn có thể sử dụng clearInterval để ngăn chặn nó.

var myTimer = setInterval(...);
clearInterval(myTimer);

92
2017-09-20 19:32





Bạn có thể thiết lập một biến mới và tăng nó lên ++ (đếm lên một) mỗi lần nó chạy, sau đó tôi sử dụng một câu lệnh có điều kiện để kết thúc nó:

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 10) {
          varCounter++;
          /* your code goes here */
     } else {
          clearInterval(intervalId);
     }
};

$(document).ready(function(){
     intervalId = setInterval(varName, 10000);
});

Tôi hy vọng rằng nó sẽ giúp và nó là đúng.


35
2018-05-16 14:02



Tôi rất ngạc nhiên khi biết rằng công trình này clearInterval(varName);. Tôi mong đợi clearInterval để không làm việc khi thông qua tên hàm, tôi nghĩ rằng nó yêu cầu ID khoảng thời gian. Tôi cho rằng điều này chỉ có thể hoạt động nếu bạn có một hàm được đặt tên, vì bạn không thể chuyển một hàm ẩn danh như là một biến bên trong chính nó. - Patrick M
Thực ra tôi nghĩ nó không hoạt động. Mã dừng được thực thi vì hạn chế trên bộ đếm, nhưng khoảng thời gian tiếp tục kích hoạt varName (). Cố gắng để đăng nhập bất cứ điều gì sau khi clearInterval () (bên trong mệnh đề khác) và bạn sẽ thấy nó được viết mãi mãi. - Rafael Oliveira
$(document).ready(function(){ }); là jQuery, đó là lý do tại sao nó không hoạt động. Điều này nên được đề cập ít nhất. - poepje
@OMGrant, Ngoài một ví dụ không hoạt động, bạn có một biến có tên varName, lưu trữ một chức năng chưa được đặt tên - wha ?? Bạn nên thay đổi hoặc gỡ bỏ câu trả lời này, IMHO. - Dean Radcliffe
Đừng hèn nhát, dành những điểm quý giá để bác bỏ câu trả lời sai lầm này. - Motes


Các câu trả lời ở trên đã giải thích cách setInterval trả về một tay cầm và cách xử lý này được sử dụng để hủy bỏ bộ đếm thời gian.

Một số cân nhắc kiến ​​trúc:

Vui lòng không sử dụng biến "phạm vi ít". Cách an toàn nhất là sử dụng thuộc tính của đối tượng DOM. Nơi dễ nhất sẽ là "tài liệu". Nếu phần khởi động lại được bắt đầu bằng nút bắt đầu / dừng, bạn có thể sử dụng nút đó:

<a onclick="start(this);">Start</a>

<script>
function start(d){
    if (d.interval){
        clearInterval(d.interval);
        d.innerHTML='Start';
    } else {
        d.interval=setInterval(function(){
          //refresh here
        },10000);
        d.innerHTML='Stop';
    }
}
</script>

Vì hàm được định nghĩa bên trong trình xử lý nhấn nút, bạn không phải định nghĩa lại nó nữa. Bộ hẹn giờ có thể được tiếp tục nếu nút được nhấp lại.


10
2018-01-19 05:46



Điều gì tốt hơn về việc đưa nó vào document hơn vào window? - icktoofay
điều chỉnh. Tôi muốn nói document.body. Trong ví dụ mã của tôi, tôi đang sử dụng chính nút đó một cách hiệu quả. Không có ID cho nút, nhưng con trỏ "này" được liên kết với tham số "d" trong hàm. Sử dụng "cửa sổ" vì phạm vi rất nguy hiểm vì các hàm cũng có. Ví dụ, "hàm test () {}" có thể truy cập thông qua window.test, giống như không sử dụng phạm vi nào, vì nó là viết tắt. Hi vọng điêu nay co ich. - Schien
không bị mất các biến "phạm vi-ít" -> không sử dụng "phạm vi-ít" Tôi đã chỉnh sửa nó, nhưng thay đổi nhỏ hơn 6 ký tự và lỗi là khó hiểu. - Leif Neland
sửa chữa. cảm ơn vì đã bắt được điều đó. - Schien
Bạn không cần DOM cho điều đó. Chỉ cho chúng tôi một IIFE để tránh ô nhiễm phạm vi toàn cầu. - Onur Yıldırım


@cnu,

Bạn có thể dừng khoảng thời gian, khi thử chạy mã trước khi tìm giao diện điều khiển trình duyệt ur (F12) ... thử bình luận clearInterval (trigger) được xem lại một giao diện điều khiển, không làm đẹp? : P

Kiểm tra ví dụ một nguồn:

var trigger = setInterval(function() { 
  if (document.getElementById('sandroalvares') != null) {
    document.write('<div id="sandroalvares" style="background: yellow; width:200px;">SandroAlvares</div>');
    clearInterval(trigger);
    console.log('Success');
  } else {
    console.log('Trigger!!');
  }
}, 1000);
<div id="sandroalvares" style="background: gold; width:200px;">Author</div>


4
2018-01-08 17:30





Đã trả lời ... Nhưng nếu bạn cần một bộ hẹn giờ nổi bật, có thể sử dụng lại cũng hỗ trợ nhiều tác vụ trong các khoảng thời gian khác nhau, bạn có thể sử dụng TaskTimer (cho Nút và trình duyệt).

// Timer with 1000ms (1 second) base interval resolution.
var timer = new TaskTimer(1000);

// Add task(s) based on tick intervals.
timer.addTask({
    name: 'job1',       // unique name of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (set to 0 for unlimited times)
    callback: function (task) {
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
    }
});

// Start the timer
timer.start();

Trong trường hợp của bạn, khi người dùng nhấp vào để làm phiền việc làm mới dữ liệu; bạn có thể gọi timer.pause() sau đó timer.resume() nếu họ cần bật lại.

Xem thêm ở đây.


4
2017-08-23 15:14





Khai báo biến để gán giá trị trả về từ setInterval (...) và chuyển biến được gán cho hàm clearInterval ();

ví dụ.

var timer, intervalInSec = 2;

timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func'

function func(param){
   console.log(param);
}

// Bất kỳ nơi nào bạn đã truy cập hẹn giờ tuyên bố ở trên gọi clearInterval

$('.htmlelement').click( function(){  // any event you want

       clearInterval(timer);// Stops or does the work
});

0
2017-10-17 20:15