Stoppen Sie setInterval

120

Ich möchte verhindern, dass dieses Intervall im errorHandler wiederholt ausgeführt wird. Ist das möglich und wenn ja, wie?

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

javascript jquery html setinterval Henrik Petterson
quelle

2

Mögliches Duplikat von Stop setInterval Aufruf in JavaScript

Mohammad

242

Sie müssen den Rückgabewert setIntervaleiner Variablen im Bereich des Klick-Handlers festlegen und dann clearInterval()wie folgt verwenden:

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

Rory McCrossan
quelle

4

Links zu Dokumenten: clearInterval () und setInterval ()

Bruno Peres

Sie können auch verwenden, setTimout()was nur einmal ausgeführt wird

Justin Liu

21

Verwenden Sie eine Variable und rufen Sie clearIntervalauf, um sie zu stoppen.

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

Chris Dixon
quelle

11

Sie müssen den zurückgegebenen Wert der setIntervalFunktion einer Variablen zuweisen

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

und dann verwenden clearInterval(interval), um es wieder zu löschen.

Moritz Roessler
quelle

8

NUTZEN Sie dies, ich hoffe, Ihnen zu helfen

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

Abdalrahman Ahmed
quelle

4

Wir können das eingestellte Intervall leicht stoppen, indem wir das Clear-Intervall aufrufen

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

Mukesh Kumar
quelle

Sehr schlechte Praxis. 1. dies könnte bedeuten Thet setIntervalindefinetely Leck konnte - keine var verbunden sind , es zu kontrollieren. 2. Sie sind nicht klar this, da thises sich nicht um ein Zeitintervall handelt. Wenn Sie verwenden TypeScript, würden Sie in Schwierigkeiten geraten:

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>

Erweitern Sie das Snippet

Flirtman
quelle

4

Bitte erläutern Sie, was dieser Code bewirkt und wie er mit der Frage zusammenhängt.

JJJ

Stoppen Sie setInterval

Antworten: