Dur setInterval

Question

error işleyicisindeki bu aralığın art arda çalışmasını durdurmak istiyorum. Bu mümkün mü ve eğer öyleyse, nasıl?

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 1

Böyle clearInterval() kullanmak sonra, tıklama işleyicisi kapsamında bir değişkene setInterval dönüş değerini ayarlamanız gerekir.

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 2

bir değişken kullanın ve bunu durdurmak için clearInterval çağırır:

$(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 3

Bir değişken

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

için setInterval fonksiyonun dönen değeri atamak ve sonra tekrar temizlemek için clearInterval(interval) kullanmak zorunda.

Answer 4

KULLANIMI umarım bu

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>