جایگزین برای setInterval استفاده از requestAnimationFrame

وقتی سراغ انیمیشن بریم خب می توان در نظر گرفت setInterval یک ایده بد است. از آنجا که , برای مثال این حلقه بدون در نظر گرفتن چیزی اجرا خواهد شد و همینطور به کار خودش ادامه می دهد ولی در مقابل requestAnimationFrame بهره وری خوشخو تری دارد.همینطور ممکن است بعضی از مرورگر ها با حلقه setInterval با مشکل مواجه شوند.

اگر شما قصد استفاده از حلقه setInterval رو داشتید، اما با عملکرد بهتری حتما از requestAnimationFrame استفاده کنید، در اینترنت برخی از گزینه های آن در دسترس هست.

نمونه کد :

var requestInterval = function (fn, delay) {
  var requestAnimFrame = (function () {
    return window.requestAnimationFrame || function (callback, element) {
      window.setTimeout(callback, 1000 / 60);
    };
  })(),
  start = new Date().getTime(),
  handle = {};
  function loop() {
    handle.value = requestAnimFrame(loop);
    var current = new Date().getTime(),
    delta = current - start;
    if (delta >= delay) {
      fn.call();
      start = new Date().getTime();
    }
  }
  handle.value = requestAnimFrame(loop);
  return handle;
};

تغییراتی که اعمال شده رو مشاهده کنید ، مانند پاکسازی فاصله، و تنظیم و پاکسازی وقفه.

این تغییرات در نسخه پایین :

window.requestInterval = function(fn, delay) {
  if( !window.requestAnimationFrame       && 
    !window.webkitRequestAnimationFrame && 
    !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
    !window.oRequestAnimationFrame      && 
    !window.msRequestAnimationFrame)
      return window.setInterval(fn, delay);
      
  var start = new Date().getTime(),
    handle = new Object();
    
  function loop() {
    var current = new Date().getTime(),
      delta = current - start;
      
    if(delta >= delay) {
      fn.call();
      start = new Date().getTime();
    }

    handle.value = requestAnimFrame(loop);
  };
  
  handle.value = requestAnimFrame(loop);
  return handle;
}

  window.clearRequestInterval = function(handle) {
  window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
  window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
  window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
  window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
  window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
  window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
  clearInterval(handle);
};

اگه این قسمت طولانی تر شده بخاطر آن دسته از نگهدارنده های vendor prefixing یا پیشوند فروشنده است . احتمال اینکه شما به این بخش کد یا پیشوندها نیاز نداشته باشید مطمئنا خیلی زیاد است.پشتیبانی requestAnimationFrame توسط مرورگر رو مشاهده کنید، اگه نیاز داشته باشید که اینترنت اکسپلورر ۹ یا در نسخه های اندروید ۲ ۳ ۴ پشتیبانی شود خب به احتمال زیاد در تمام این ها استفاده ای نخواهد داشت .
این vendor prefixing تنها در نسخه های قدیمی سافاری و فایرفاکس به درد شما خواهد خورد.

و یکی بیشتر از  StackExchange:

window.rInterval=function(callback,delay) {
  var dateNow=Date.now,
    requestAnimation=window.requestAnimationFrame,
    start=dateNow(),
    stop,
    intervalFunc=function() {
      dateNow()-start<delay||(start+=delay, callback());
      stop||requestAnimation(intervalFunc)
    }
  requestAnimation(intervalFunc);
  return {
    clear: function(){ stop=1 }
  }
}

9
خیلی مهم است بدانیم دیدگاه شما راجع به این مطلب چیست؟

avatar
7 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
دانلود مقالهخشکشویی آنلاینانجام پایان نامهکابینت کرجآموزش تعمیرات موبایل Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
سئو سایت
Guest
سئو سایت

سلام.وبسایت خیلی خوبی دارید.ممنون

متن آهنگ
Guest
متن آهنگ

سلام.ممنون .خیلی خوب بود.از دست اندرکاران
وبسایت به این خوبی سپاسگزارم

آموزش تعمیرات موبایل
Guest
آموزش تعمیرات موبایل

وبسایت خیلی خوبی دارین

کابینت کرج
Guest
کابینت کرج

خیلی عالی تشکر

انجام پایان نامه
Guest
انجام پایان نامه

سلام.ممنون از مطالب کاربردی سایت.سپاس.

خشکشویی آنلاین
Guest
خشکشویی آنلاین

سلام.من همیشه مطالبتون رو دنبال میکنم.وبسایت خیلی خوبی دارید

دانلود مقاله
Guest
دانلود مقاله

سلام.مطالب سایت عالیه.ممنون از سایت مفید شما.موفق باشید.