JavaScript'te set aramasını durdurma

setInterval(fname, 10000);JavaScript'te her 10 saniyede bir işlevi çağırmak için kullanıyorum . Bir etkinlikte aramayı durdurmak mümkün mü?

Kullanıcının verilerin tekrar tekrar yenilenmesini durdurabilmesini istiyorum.

setInterval()aşağıdakilere iletebileceğiniz bir aralık kimliği döndürür clearInterval():

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Belgelerine bakınız setInterval()ve clearInterval().

setIntervalBir değişkenin dönüş değerini ayarlarsanız , bunu clearIntervaldurdurmak için kullanabilirsiniz .

var myTimer = setInterval(...);
clearInterval(myTimer);

Yeni bir değişken ayarlayabilir ve her çalıştığında ++ (bir sayım) tarafından artırılmasını sağlayabilirsiniz, sonra onu sonlandırmak için bir koşullu ifade kullanın:

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 10) {
          varCounter++;
          /* your code goes here */
     } else {
          clearInterval(intervalId);
     }
};

$(document).ready(function(){
     intervalId = setInterval(varName, 10000);
});

Umarım yardımcı olur ve doğrudur.

Yukarıdaki cevaplar, setInterval'in bir tanıtıcıyı nasıl döndürdüğünü ve bu tanıtıcı Aralık zamanlayıcısını iptal etmek için nasıl kullanıldığını zaten açıkladı.

Bazı mimari düşünceler:

Lütfen "kapsamsız" değişkenler kullanmayın. En güvenli yol, bir DOM nesnesinin niteliğini kullanmaktır. En kolay yer "belge" olacaktır. Tazeleme bir başlatma / durdurma düğmesiyle başlatılırsa, düğmenin kendisini kullanabilirsiniz:

<a onclick="start(this);">Start</a>

<script>
function start(d){
    if (d.interval){
        clearInterval(d.interval);
        d.innerHTML='Start';
    } else {
        d.interval=setInterval(function(){
          //refresh here
        },10000);
        d.innerHTML='Stop';
    }
}
</script>

İşlev, düğme tıklama işleyicisinin içinde tanımlandığından, yeniden tanımlamanız gerekmez. Düğmeye tekrar tıklanırsa zamanlayıcı kaldığı yerden devam edebilir.

Zaten cevap ... Ama aynı zamanda farklı aralıklarla birden fazla görevleri destekleyen bir özellikli, yeniden kullanılabilir zamanlayıcı gerekiyorsa, benim kullanabilirsiniz TaskTimer (Düğüm ve tarayıcı için).

// Timer with 1000ms (1 second) base interval resolution.
const timer = new TaskTimer(1000);

// Add task(s) based on tick intervals.
timer.add({
    id: 'job1',         // unique id of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (omit for unlimited times)
    callback(task) {
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
        // stop the timer anytime you like
        if (someCondition()) timer.stop();
        // or simply remove this task if you have others
        if (someCondition()) timer.remove(task.id);
    }
});

// Start the timer
timer.start();

Sizin durumunuzda, kullanıcılar veri yenilemesini bozmak için tıkladığında; Ayrıca arayabilir timer.pause()sonra timer.resume()onlar gerekiyorsa yeniden etkinleştirin.

Görmek fazlasını burada .

ClearInterval () yöntemi, setInterval () yöntemiyle ayarlanan bir zamanlayıcıyı temizlemek için kullanılabilir.

setInterval her zaman bir kimlik değeri döndürür. Bu değer zamanlayıcıyı durdurmak için clearInterval () içinde geçirilebilir. İşte 30'dan başlayan ve 0 olduğunda duran bir zamanlayıcı örneği.

  let time = 30;
  const timeValue = setInterval((interval) => {
  time = this.time - 1;
  if (time <= 0) {
    clearInterval(timeValue);
  }
}, 1000);

, @cnu

Konsol tarayıcısına (F12) bakmadan önce kodu çalıştırmayı denediğinizde aralığı durdurabilirsiniz ... açıklamayı deneyin : P

Örneğe bir kaynak kontrol edin:

var trigger = setInterval(function() { 
  if (document.getElementById('sandroalvares') != null) {
    document.write('<div id="sandroalvares" style="background: yellow; width:200px;">SandroAlvares</div>');
    clearInterval(trigger);
    console.log('Success');
  } else {
    console.log('Trigger!!');
  }
}, 1000);

<div id="sandroalvares" style="background: gold; width:200px;">Author</div>

SetInterval (...) öğesinden döndürülen değeri atamak için değişken bildirin ve atanan değişkeni clearInterval () öğesine iletin;

Örneğin

var timer, intervalInSec = 2;

timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func'

function func(param){
   console.log(param);
}

// Yukarıda belirtilen zamanlayıcıya eriştiğiniz her yerde clearInterval çağrısı yapın

$('.htmlelement').click( function(){  // any event you want

       clearInterval(timer);// Stops or does the work
});

var keepGoing = true;
setInterval(function () {
     if (keepGoing) {
        //DO YOUR STUFF HERE            
        console.log(i);
     }
     //YOU CAN CHANGE 'keepGoing' HERE
  }, 500);

Aralığı, "durma aralığı" kimliğine sahip bir düğme söyleyecek bir olay dinleyicisi ekleyerek de durdurabilirsiniz:

$('buuton#stop-interval').click(function(){
   keepGoing = false;
});

HTML:

<button id="stop-interval">Stop Interval</button>

Not: Aralık hala yürütülecek, ancak hiçbir şey olmayacak.

10 saniye sonra zamanlayıcıyı durdurmak için clearInterval () yöntemini bu şekilde kullandım.

function startCountDown() {
  var countdownNumberEl = document.getElementById('countdown-number');
  var countdown = 10;
  const interval = setInterval(() => {
    countdown = --countdown <= 0 ? 10 : countdown;
    countdownNumberEl.textContent = countdown;
    if (countdown == 1) {
      clearInterval(interval);
    }
  }, 1000)
}

<head>
  <body>
    <button id="countdown-number" onclick="startCountDown();">Show Time </button>
  </body>
</head>

Bir süre sonra aralığı durdurmak için setTimeOut öğesini kullanın.

var interVal = setInterval(function(){console.log("Running")  }, 1000);
 setTimeout(function (argument) {
    clearInterval(interVal);
 },10000);

Aşağıdaki kod yardımcı olacaktır sanırım:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

Kodu% 100 doğru yaptınız ... Ee ... Sorun nedir? Ya da bir öğretici ...

Neden daha basit bir yaklaşım kullanmıyorsunuz? Bir sınıf ekleyin!

Sadece aralığa hiçbir şey yapmamasını söyleyen bir sınıf ekleyin. Örneğin: fareyle üzerine gelindiğinde.

var i = 0;
this.setInterval(function() {
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    console.log('Counting...');
    $('#counter').html(i++); //just for explaining and showing
  } else {
    console.log('Stopped counting');
  }
}, 500);

/* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$('#counter').hover(function() { //mouse enter
    $(this).addClass('pauseInterval');
  },function() { //mouse leave
    $(this).removeClass('pauseInterval');
  }
);

/* Other example */
$('#pauseInterval').click(function() {
  $('#counter').toggleClass('pauseInterval');
});

body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
}
#counter {
  width: 50%;
  background: #ddd;
  border: 2px solid #009afd;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  transition: .3s;
  margin: 0 auto;
}
#counter.pauseInterval {
  border-color: red;  
}

<!-- you'll need jQuery for this. If you really want a vanilla version, ask -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="counter">&nbsp;</p>
<button id="pauseInterval">Pause</button></p>

Yaşlar için bu hızlı ve kolay yaklaşımı arıyordum, bu yüzden mümkün olduğunca çok insanı tanıtmak için birkaç sürüm gönderiyorum.