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




مكتبة innerhtml (8)

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 لتحقيق التأثير المطلوب الأمثل.

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

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

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

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

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

تحديث

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


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

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

هذا هو مقاربتي:

document.addEventListener('DOMContentLoaded', function(){
    var tos = {};
    var idi = 0;
    var fn  = function(id)
    {
        var len = Object.keys(tos).length;

        if(len == 0)
            return;

        to = tos[id];
        delete tos[id];

        if(len-1 == 0)
            console.log('Resize finished trigger');
    };

    window.addEventListener('resize', function(){
        idi++;
        var id = 'id-'+idi;
        tos[id] = window.setTimeout(function(){fn(id)}, 500);
    });
});

يقوم مستمع الحدث- 'id-' جميع مكالمات تغيير الحجم الواردة ، وينشئ وظيفة 'id-' لكل منها ويحفظ معرّف المهلة إلى جانب رقم 'id-' قبل 'id-' (ليكون قابلاً للاستخدام كمفتاح الصفيف) في tos -array.

في كل مرة ، يطلق timout ، فإنه يستدعي الدالة fn ، التي تقوم بالتحقق ، إذا كانت هذه هي آخر مهلة في صفيف tos (تقوم الدالة fn بحذف كل توقيت تم تنفيذه). إذا كان true (= if(len-1 == 0) ) ، يتم تغيير الحجم.


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);
    }
});

jsfiddle.net/Zevan/c9UE5/1

يمكنك تخزين معرف مرجع إلى أي setInterval أو setTimeout. مثله:

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

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

function registerResize(f) {
    $(window).resize(function() {
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = setTimeout(function() {
            var oldOverflow = document.body.style.overflow;
            document.body.style.overflow = "hidden";
            var currHeight = $(window).height(),
                currWidth = $(window).width();
            document.body.style.overflow = oldOverflow;

            var prevUndefined = (typeof this.prevHeight === 'undefined' || typeof this.prevWidth === 'undefined');
            if (prevUndefined || this.prevHeight !== currHeight || this.prevWidth !== currWidth) {
                //console.log('Window size ' + (prevUndefined ? '' : this.prevHeight + "," + this.prevWidth) + " -> " + currHeight + "," + currWidth);
                this.prevHeight = currHeight;
                this.prevWidth = currWidth;

                f(currHeight, currWidth);
            }
        }, 200);
    });
    $(window).resize(); // initialize
}

registerResize(function(height, width) {
    // this will be called only once per resize regardless of scrollbars changes
});

انظر jsfiddle


هناك الكثير من الطرق لتحديث صفحة باستخدام JavaScript:

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)
  6. location.reload(false)

    إذا احتجنا إلى سحب المستند من خادم الويب مرة أخرى (مثل تغيير محتويات المستندات ديناميكيًا) ، فإننا سنجتاز هذه الحجة على أنها true .

يمكنك متابعة القائمة قيد التصميم:

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}
button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>







javascript jquery html