Dừng setInterval


120

Tôi muốn ngăn khoảng thời gian này trong errortrình xử lý chạy liên tục. Điều đó có thể không, và nếu vậy, làm thế nào?

// example code
$(document).on('ready',function(){
    setInterval(updateDiv,3000);
});

function updateDiv(){
    $.ajax({
        url: 'getContent.php',
        success: function(data){
            $('.square').html(data);
        },
        error: function(){
            $.playSound('oneday.wav');
            $('.square').html('<span style="color:red">Connection problems</span>');
            // I want to stop it here
        }
    });
}

2
Có thể trùng lặp của Dừng setInterval gọi trong JavaScript
Mohammad

Câu trả lời:


242

Bạn cần đặt giá trị trả về của setIntervalmột biến trong phạm vi của trình xử lý nhấp chuột, sau đó sử dụng clearInterval()như sau:

var interval = null;
$(document).on('ready',function(){
    interval = setInterval(updateDiv,3000);
});

function updateDiv(){
    $.ajax({
        url: 'getContent.php',
        success: function(data){
            $('.square').html(data);
        },
        error: function(){
            clearInterval(interval); // stop the interval
            $.playSound('oneday.wav');
            $('.square').html('<span style="color:red">Connection problems</span>');
        }
    });
}

4
Các liên kết đến tài liệu: clearInterval ()setInterval ()
Bruno Peres

Bạn cũng có thể sử dụng setTimout()mà chỉ chạy một lần
Justin Liu

21

Sử dụng một biến và gọi clearIntervalđể dừng nó.

var interval;

$(document).on('ready',function()
  interval = setInterval(updateDiv,3000);
  });

  function updateDiv(){
    $.ajax({
      url: 'getContent.php',
      success: function(data){
        $('.square').html(data);
      },
      error: function(){
        $.playSound('oneday.wav');
        $('.square').html('<span style="color:red">Connection problems</span>');
        // I want to stop it here
        clearInterval(interval);
      }
    });
  }

11

Bạn phải gán giá trị trả về của setIntervalhàm cho một biến

var interval;
$(document).on('ready',function(){
    interval = setInterval(updateDiv,3000);
});

và sau đó sử dụng clearInterval(interval)để xóa nó một lần nữa.


8

SỬ DỤNG cái này tôi hy vọng sẽ giúp bạn

var interval;

function updateDiv(){
    $.ajax({
        url: 'getContent.php',
        success: function(data){
            $('.square').html(data);
        },
        error: function(){
            /* clearInterval(interval); */
            stopinterval(); // stop the interval
            $.playSound('oneday.wav');
            $('.square').html('<span style="color:red">Connection problems</span>');
        }
    });
}

function playinterval(){
  updateDiv(); 
  interval = setInterval(function(){updateDiv();},3000); 
  return false;
}

function stopinterval(){
  clearInterval(interval); 
  return false;
}

$(document)
.on('ready',playinterval)
.on({click:playinterval},"#playinterval")
.on({click:stopinterval},"#stopinterval");

4

chúng ta có thể dễ dàng dừng khoảng thời gian đã đặt bằng cách gọi khoảng thời gian rõ ràng

var count = 0 , i = 5;
var vary = function intervalFunc() {
  count++;
      console.log(count);
    console.log('hello boy');  
    if (count == 10) {
      clearInterval(this);
    }
}

  setInterval(vary, 1500);

Thực hành rất tệ. Thứ nhất, điều này nghĩa là nó setIntervalcó thể bị rò rỉ không xác định - không có var liên kết, để kiểm soát nó. Thứ hai bạn không rõ ràng this, vì thiskhông phải là một khoảng thời gian. Nếu bạn sử dụng, TypeScriptbạn sẽ gặp rắc rối:No overload matches this call.Overload 1 of 2, '(intervalId: Timeout): void', gave the following error: Argument of type 'this' is not assignable to parameter of type 'Timeout'.
Pedro Ferreira

-2

var flasher_icon = function (obj) {
    var classToToggle = obj.classToToggle;
    var elem = obj.targetElem;
    var oneTime = obj.speed;
    var halfFlash = oneTime / 2;
    var totalTime = obj.flashingTimes * oneTime;

    var interval = setInterval(function(){
        elem.addClass(classToToggle);
        setTimeout(function() {
            elem.removeClass(classToToggle);
        }, halfFlash);
    }, oneTime);

    setTimeout(function() {
        clearInterval(interval);
    }, totalTime);
};

flasher_icon({
    targetElem: $('#icon-step-1-v1'),
    flashingTimes: 3,
    classToToggle: 'flasher_icon',
    speed: 500
});
.steps-icon{
    background: #d8d8d8;
    color: #000;
    font-size: 55px;
    padding: 15px;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
}
.flasher_icon{
  color: #fff;
  background: #820000 !important;
  padding-bottom: 15px !important;
  padding-top: 15px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

<i class="steps-icon material-icons active" id="icon-step-1-v1" title="" data-toggle="tooltip" data-placement="bottom" data-original-title="Origin Airport">alarm</i>


4
Vui lòng giải thích mã này có chức năng gì và nó liên quan như thế nào đến câu hỏi.
JJJ
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.