توابع جاوا اسکریپت ضروری در طراحی سایت (۱)

بدون شک بهینه بودن سایت شما تاثیر مثبتی بر بازدید کنندگان خواهد گذاشت و باعث میشود کاربرانتان مجددا تمایل به بازدید از سایت شما داشته باشند. یکی از اشتباهات در طراحی سایت استفاده از فانکشن های (function) است که بهینه نیستند و باعث کندی مرورگر شوند.
اگر وب اپلیکیشن شما شامل فانکشن های جاوا اسکریپتی میشود که محاسباتی بر اساس تغییرات مرورگر و یا دیگر پارامترها می شود بررسی تغییرات سایز مرورگر کاربر و یا موردهای شبیه به این. درصورتی که زمان اجرای کد جاوااسکریپتی بعد از این نوع تغییرات باشد به محض resize شدن صفحه و به ازای هر تغییر (هر پیکسل تغییر سایز صفحه) کدهای فانکشن شما اجرا میشود و این باعث کندی صفحه شما می¬شود.
خب! راه حل این مشکل نوشتن یک فانکشنه که بتونید با اون هر فانکشنی رو که خواستید با زمان دلخواه اجرا کنید. به مثال زیر توجه کنید تا بیشتر متوجه بشید

// سه پارامتر ورودی داره که اولی فانکشن موردنظرتون رو میگیره

// دومین پارامتر هم زمان اجرا شدن فانکشن رو دریافت میکنه

// اگر پارامتر سوم نیز پاس داده شود به این معنی است که اجرای فانکشن داخلی قبل از زمان اجرا شود و نه بعد از سپری شدن دوره زمانی مشخص شده

function debounce(func, wait, immediate) {
   var timeout;
   return function() {
      var context = this, args = arguments;

      var later = function() {
           timeout = null;
           if (!immediate) func.apply(context, args);
      };

      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
   };
};

شما باید به فانکشن debounce فانکشن خودتون رو پاس بدین ( یعنی کدهای اصلی­تون رو تو دل این فانکشن بنویسید) و بعد خیلی ساده میتونین زمان اجرای کدتون رو تعیین کنید.

مثال زیر رو با هم ببینیم:

var myEfficientFn = debounce(function() {

      // کدهای فانکشن شما

}, ۲۵۰);

 

window.addEventListener('resize', myEfficientFn);

فانکشن بالا یک بار در هر بازه زمانی (بعد از گذشت N میلی­ثانیه) تعیین شده اجرا میشه به­ جای اینکه با هر تغییر سایز مرورگر اجرا بشه، این امر باعث میشه در بهینه بودن صفحه تاثیر بسیار زیادی بذاره.

البته اینکه کجا از این فانکشن استفاده بشه و زمان اجراشدن کاملا بستگی به شما داره، پس حتما به بهینه سازی سایت توجه کنید تا کاربراتون برای دفعات بعدی هم ترغیب به بازدید از سایتتون بشن.

نظر بدهید

ایمیل شما منتشر نخواهد شد. Required fields are marked *

شما می توانید استفاده نمایید از HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>