javascript - start - Stop setInterval

stop set interval js

Question

Quiero detener este intervalo en el controlador de error no se ejecute repetidamente. Es posible, y si es así, ¿cómo?

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

UTILIZA esto espero ayudarte

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 2

Usa una variable y llama a clearInterval para detenerlo.

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

setInterval asignar el valor devuelto de la función setInterval a una variable

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

y luego use clearInterval(interval) para borrarlo nuevamente.

Answer 4

setInterval establecer el valor de retorno de setInterval en una variable dentro del alcance del manejador de clics, luego use clearInterval() esta manera:

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 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>