وقتی سراغ انیمیشن بریم خب می توان در نظر گرفت 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 }
  }
}
بارگذاری بیشتر مطالب مرتبط
بارگذاری توسط تک آمــوز
بارگذاری در قطعه کد

4 نظرات

  1. سئو سایت

    2016/12/27 at 5:59 ب.ظ

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

    پاسخ

    • hossein

      2016/12/28 at 10:15 ق.ظ

      لطف دارید

      پاسخ

  2. متن آهنگ

    2017/01/02 at 12:26 ب.ظ

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

    پاسخ

    • hossein

      2017/01/03 at 6:44 ب.ظ

      ممنون لطف دارید

      پاسخ

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *