نحوه غیر فعال کردن دستور setInterval یا تایمر در جی کویری

سلام

چون از setIOnterval در یک فانکشن استفاده کردید (در واقع چون به صورت گلوبال تعریفش نکردید) برای غیر فعال کردنش باید به نحوی، فعال یا غیر فعال بودن تایمرتون رو مدیریت کنید، به عبارت دیگه باید کاری کنید که وقتی تایمر شروع به کار میکنه ازش یه مقدار بگیرید و بعدا از اون مقدار برای غیرفعال کردن تامیر استفاده کنید.

شما این مثالو ببینید : 

<div id="d1" style="background-color: yellow; padding: 20px;" ></div><br>
<button onclick="timer()">Start</button><br>
<button onclick="stop()">Stop</button>

مثلا اگه بخوایم با این 3 تا المنت بالا یه تایمر بسازیم که بشه شروع یا متوقف کردنشو مدیریت کرد باید از قطعه کد زیر استفاده کنیم.

var time;
var x = true;
function timer() {
	if ( x == true) {
		time = setInterval(timer2 , 1000);
	}
	else if (x == false) {
		clearInterval(time)
	}
	x = true;
}

function timer2() {
	var date = new Date();
	document.getElementById('d1').innerHTML = date.toLocaleTimeString();
}

function stop() {
	x = false;
	timer()
}

تو این کد برای مدیریت فعال یا غیرفعال بودن تایم از متغیر x استفاده کردم، حالا این x دقیقا چیکار میکنه؟

وقتی روی دکمه Start کلیک میشه فانکشن timer فراخوانی میشه. اینجا گفتیم اگر مقدار متغیر true بود تو بیا setInterval کن فانکشن timer2 رو. حالا قبل از اون چون مقدار متغیر x رو true داده بودیم این میاد و عملیات setInterval رو انجام میده. یعنی بعد از کلیک روی کلید Start، تایمر شروع به کار میکنه.

حالا وقتی روی دکمه Stop کلیک میشه فانکشن stop فراخوانی میشه. این فانکشن میگه که اولا بیا مقدار x رو false بده (که بعدا از طریقش بتونیم تایمر رو غیرفعال کنیم) و بعد هم بیا دوباره فانکشن timer رو فراخوانی کن. حالا فانکشن timer دوباره فراخوانی میشه اما اینبار چون مقدار متغیر ایکس false هست شرطی که توی if گفتیم ( x == true ) رو رد میکنه و میره سراغ else if. اینجا گفتیم اگر مقدار x مساوی false بود تو تایمر رو متوقف کن و چون مقدار x رو با فراخوانی فانکشن stop به false تغییر دادیم این میاد و ساعت رو متوقف میکنه. آخرش هم میایم مقدار x رو به همون مقدار اولیه یعنی true برمیگردونیم تا بعدا اگر دوباره روی کلید Start کلیک شد این بیاد timer رو فراخوانی کنی و بعد از اینکه ببینه مقدار ایکس true هست timer2 رو فراخوانی کنه و ساعت دوباره شروع به کار کنه و ادامه کار هم الی الابد به همین منوال.

متغیر x رو هم باید به صورت گلوبال تعریف کرد که بشه تو هر فانکشنی ازش استفاده کرد.

به زبون ساده‌ی جاوااسکریپت گفتم که قشنگ جا بیوفته مطلب.

البته این کدها بهتره روی فقط یک button اعمال بشن نه دو تا، چون تو یه سری شرایط خاص ممکنه مشکل ساز بشه، منظور اینجور کدیه :

<div id="d1" style="background-color: yellow; padding: 20px;" ></div><br>
<button onclick="timer(this)">Start</button><br>

var time;
var x = true;
function timer(btn) {
    if (x == true) {
        time = setInterval(timer2 , 1000) ;
        btn.innerHTML = "Stop";
        x = false;
    }
    else {
        clearInterval(time);
        btn.innerHTML = "Start";
        x = true;

    }
}
function timer2() {
    var date = new Date();
    document.getElementById('d1').innerHTML = date.toLocaleTimeString();
}

نحوه غیر فعال کردن دستور setInterval یا تایمر در جی کوئری

برای استفاده از تابع clearInterval میتونید از روش زیر هم استفاده کنید. در این روش یک متغیر عمومی تعریف شده و مقدار تابع setInterval توش تعریف شده. بعد این متغیر رو به راحتی به clearInterval ارسال می کنیم

<script>
    var myVar;
    function startdeadlinefunc() {
            myVar = setInterval(function () {
                //statement
            }
       }, 1000);
    }


    $('#btnstop').on('click', function(){
        clearInterval(myVar); 
    });
</script>

به این صورت میتونید به راحتی Timer رو متوقف کنید.