وقف setInterval الدعوة في جافا سكريبت

Question

أنا باستخدام setInterval(fname, 10000); أن الدعوة وظيفة كل 10 ثوان في جافا سكريبت.هل من الممكن أن تتوقف عن الاتصال على الحدث ؟

أريد من المستخدم أن يكون قادرا على وقف تكرار تحديث البيانات.

Answer 1

setInterval() إرجاع فاصل الهوية التي يمكنك تمرير إلى clearInterval():

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

راجع مستندات setInterval() و clearInterval().

Answer 2

إذا قمت بتعيين قيمة الإرجاع setInterval إلى متغير ، يمكنك استخدام clearInterval لوقف ذلك.

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

Answer 3

يمكنك تعيين متغير جديد ويكون ذلك بمقدار ++ (عدد واحد) في كل مرة يتم تشغيله ، ثم يمكنني استخدام عبارة شرطية إلى الغاية:

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

آمل أن يساعد هذا هو الحق.

Answer 4

الإجابات أعلاه قد شرحت كيف setInterval إرجاع مقبض ، وكيفية التعامل مع هذا يستخدم إلغاء الفاصل الزمني الموقت.

بعض الاعتبارات المعمارية:

يرجى عدم استخدام "نطاق أقل" المتغيرات.أسلم طريقة هي استخدام سمة من كائن DOM.أسهل مكان سيكون "الوثيقة".إذا كان تنشيطية بدأت قبل بدء/إيقاف زر يمكنك استخدام زر في حد ذاته:

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

لأن وظيفة محددة داخل انقر فوق الزر معالج, لم يكن لديك لتحديد ذلك مرة أخرى.توقيت يمكن أن تستأنف إذا كان النقر فوق الزر مرة أخرى.

Answer 5

أجبت...ولكن إذا كنت في حاجة مميزة ، يمكن إعادة استخدامها توقيت هذا أيضا يدعم العديد من المهام على فترات مختلفة ، يمكنك استخدام بلدي TaskTimer (على عقدة المتصفح).

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

في حالة, عندما ينقر المستخدمون على إزعاج البيانات-تحديث ؛ يمكنك أيضا الاتصال timer.pause() ثم timer.resume() إذا كانوا بحاجة إلى إعادة تمكين.

انظر المزيد هنا.

Answer 6

@cnu ،

يمكنك التوقف عن الفاصل الزمني عند محاولة تشغيل التعليمات البرمجية قبل نظرة اور وحدة تحكم المتصفح (F12) ...محاولة التعليق clearInterval(الزناد) هو أن ننظر مرة أخرى وحدة لا المجمل?:P

تحقق سبيل المثال مصدر:

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>

Answer 7

تعلن متغير لتعيين القيمة التي تم إرجاعها من setInterval(...) وتمرير تعيين متغير clearInterval();

على سبيل المثال

var timer, intervalInSec = 2;

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

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

// في أي مكان لديك الوصول إلى توقيت أعلن أعلاه الاتصال clearInterval

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

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

Answer 8

على clearInterval() الطريقة يمكن استخدامها لمسح مجموعة الموقت مع setInterval (طريقة).

setInterval دائما بإرجاع قيمة معرف.هذه القيمة يمكن أن تنتقل في clearInterval() لإيقاف الموقت.هنا هو مثال على توقيت بدء من 30 وتوقف عندما يصبح 0.

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

Answer 9

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

يمكنك أيضا إيقاف الفاصل بإضافة المستمع الحدث إلى دعنا نقول زر مع معرف "وقف الفاصل":

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

HTML:

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

ملاحظة:الفاصل الزمني سوف لا يزال يتم تنفيذها ، لن يحدث شيء على الرغم من.

Answer 10

لماذا لا تستخدم أبسط النهج ؟ إضافة فئة!

ببساطة إضافة فئة يحكي فترة لا تفعل أي شيء.على سبيل المثال:على التحويم.

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>

لقد كنت أبحث عن هذا سهل و سريع نهج الأعمار ، لذلك أنا نشر عدة إصدارات لتقديم العديد من الناس أن ذلك ممكن.