کلا این مشکل توی مرورگر های مدرن وجود داره،
شما وقتی از صفحه جاری که اسکریپتتون داره اجرا میشه خارج میشید، cpu برای اینکه به پردازش هایی که شما در حال حاضر روی اونا focus کردید
بهتر سرویس دهی کند، صفحات قبلی شما رو توی حالت معلق (wait) قرار میده،
حالا وقتی دوباره شما به صفحه اسکریپت خودتون برمیگردید (بعده 7-8 دقیقه)، cpu برنامهای که setInterval توش اجرا شده رو از صف معلقها (wait) به حالت اجرا (run) درمیاره .
برای همین همه زمانهایی که شما اسکریپت رو معلق گذاشتید رو اجرا میکنه !!
بطور کلی راهحل ها :
1- بیاد زمانی رو که از حالت focus اسکریپت خارج میشید رو تشخیص یدید، و setInterval رو با removeinterval غیر فعال کنید و وقتی دوباره برمیگردید دوباره setInterval !!
2- از یک سری تکنیک استفاده کنید مثلا مثال زیر هر 500ms یکبار اجرا میشه :
کد HTML:
<html>
<head>
<title>fix problem with setInterval and so </title>
<script type="text/javascript" src='../src/jquery.js'></script>
</head>
<body>
<div id='x' style='width:100px;height:100px'></div>
<script type="text/javascript">
var intervals = 1,
prev = new Date();
function timer() {
$('#x').css('background-color', intervals % 2 ? 'blue' : 'red');
intervals += 1;
//
// We want the next interval to be in 500ms, but if
// the previous one was too long we'll correct for it,
// or at least try to.
var now = new Date();
setTimeout(timer, Math.max(0, Math.min(500, 1000 - (now - prev))));
prev = now;
}
setTimeout(timer, 1000);
</script>
</body>
</html>