Stop setInterval

Question

errorハンドラでこの間隔を繰り返し実行しないようにします。それは可能ですか？あれば、どうですか？

$(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 
     } 
    }); 
} 

Answer 1

あなたはこのようclearInterval()を使用し、その後、クリックハンドラのスコープ内の変数にsetIntervalの戻り値を設定する必要があります。

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

Answer 2

は、変数を使用し、それを停止するclearIntervalを呼び出します。

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

Answer 3

あなたは、変数

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

にsetInterval関数の戻り値を代入して、再びそれをクリアするためにclearInterval(interval)を使用する必要があります。

Answer 4

使用この私は、あなたがそれを弟だ

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"); 

Answer 5

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>