[javascript] JQuery: كيفية الاتصال بحدث RESIZE مرة واحدة فقط عند الانتهاء من تغيير الحجم؟


3 Answers

Debounce

function debouncer( func , timeout ) {
   var timeoutID , timeout = timeout || 200;
   return function () {
      var scope = this , args = arguments;
      clearTimeout( timeoutID );
      timeoutID = setTimeout( function () {
          func.apply( scope , Array.prototype.slice.call( args ) );
      } , timeout );
   }
}


$( window ).resize( debouncer( function ( e ) {
    // do stuff 
} ) );

ملاحظة ، يمكنك استخدام هذه الطريقة لأي شيء تريد التنازل عنه (الأحداث الرئيسية وما إلى ذلك).

قم بتعديل المعلمة timeout لتحقيق التأثير المطلوب الأمثل.

Question

كيف يمكنني استدعاء وظيفة بمجرد الانتهاء من تغيير حجم نوافذ المستعرض؟

أحاول القيام بذلك مثل ذلك ، ولكن أواجه مشاكل. أنا أستخدم وظيفة الحدث JQuery Resize:

$(window).resize(function() {
  ... // how to call only once the browser has FINISHED resizing?
});

ومع ذلك ، يتم استدعاء هذه الدالة بشكل مستمر إذا كان المستخدم يقوم بتغيير حجم إطار المستعرض يدوياً. وهو ما يعني أنه قد يستدعي هذه الوظيفة عشرات المرات في فاصل زمني قصير.

كيف يمكنني استدعاء وظيفة تغيير الحجم مرة واحدة فقط (بمجرد الانتهاء من تغيير حجم نافذة المتصفح)؟

تحديث

أيضا دون الحاجة إلى استخدام متغير عالمي.




var lightbox_resize = false;
$(window).resize(function() {
    console.log(true);
    if (lightbox_resize)
        clearTimeout(lightbox_resize);
    lightbox_resize = setTimeout(function() {
        console.log('resize');
    }, 500);
});



يوفر jQuery طريقة off لإزالة معالج الأحداث

$(window).resize(function(){
    if(magic == true) {
        $(window).off('resize', arguments.callee);
    }
});



لدى Underscore.js طريقتين كبيرتين لهذه المهمة: throttle و underscorejs.org/#debounce . حتى إذا كنت لا تستخدم Underscore ، فألق نظرة على مصدر هذه الوظائف. إليك مثال على ذلك:

var redraw = function() {'redraw logic here'};
var debouncedRedraw = _.debounce(redraw, 750);
$(window).on('resize', debouncedRedraw);



Related