حدث onresize dom.

Question

إذا كان لدي هذا

window.onresize = function() {
  alert('resized!!');
};

يتم إطلاق وظيفتي عدة مرات طَوَال تغيير حجم، ولكن أريد التقاط إكمال من تغيير حجم. هذا في IE.

أيه أفكار؟ هناك أفكار مختلفة هناك، ولكن لم تنجح بالنسبة لي حتى الآن (مثال على نافذة IE المفترض. الحدث.)

Answer 1

في هذه الحالة، أود بقوة اقتراح redouncing. الطريقة الأكثر بساطة وفعالة وموثوقة للقيام بذلك في جافا سكريبت التي وجدتها هي مسافة جيس بن علمان، خنق / رعاية (يمكن استخدامها مع أو بدون jquery - أعرف ... يبدو غريبا).

مع الحظ، سيكون رمز القيام بذلك بسيطة مثل:

$(window).resize($.debounce(1000, function() {
   // Handle your resize only once total, after a one second calm.
   ...
}));

نأمل أن تساعد شخص ما. ؛)

Answer 2

أنا دائما استخدام هذا عندما أريد أن أفعل شيئا بعد تغيير حجم. المكالمات إلى setTimeout و clearTimeout ليست بأي تأثير ملحوظ على سرعة تغيير الحجم، لذلك ليست مشكلة تسمى هذه مرات متعددة.

var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(func, 100);
}

Answer 3

هذا هو ليس مثاليا ولكن يجب أن تعطيك البداية تحتاجها.

var initialX = null;
var initialY = null;
var lastResize = null;
var waiting = false;
var first = true;
var id = 0;

function updateResizeTime()
{
    if (initialX === event.clientX && initialY === event.clientY)
    {
        return;
    }

    initialX = event.clientX;
    initialY = event.clientY;

    if (first)
    {
        first = false;
        return;
    }

    lastResize = new Date();            
    if (!waiting && id == 0)
    {
        waiting = true;
        id = setInterval(checkForResizeEnd, 1000);
    }
}

function checkForResizeEnd()
{
    if ((new Date()).getTime() - lastResize.getTime() >= 1000)
    {
        waiting = false;
        clearInterval(id);
        id = 0;
        alert('hey!');
    }
}

window.onresize = function()
{
    updateResizeTime();
}

Answer 4

تحصل على أحداث متعددة لأن هناك أحداث متعددة حقا. يقوم Windows بتحويل تغيير حجمه عن طريق القيام بذلك عدة مرات أثناء سحب النافذة (افتراضيا، يمكنك تغييره في التسجيل الذي أفكر فيه).

ما يمكنك فعله هو إضافة تأخير. قم بإجراء ClearTimeout، Settimout (Myresize، 1000) في كل مرة حرائق حدث IE. بعد ذلك، فقط آخر واحد سوف يقوم بالتغيير الحجم الفعلي.

Answer 5

لست متأكدا مما إذا كان هذا قد يساعد، ولكن لأنه يبدو أنه يعمل تماما، ها هو. لقد أخذت المقتطف من المنشور السابق وتعديلها قليلا. تترجم الوظيفة docenter () أولا px إلى em وغيرها من عرض عرض الكائن ويقسم الباقي ب 2. يتم تعيين النتيجة على أنها الهامش الأيسر. يتم تنفيذ docenter () لمركز الكائن. حرائق المهلة عندما يتم تغيير حجم النافذة المنفذة Docenter () مرة أخرى.

function doCenter() {
document.getElementById("menuWrapper").style.position = "fixed";
var getEM = (window.innerWidth * 0.063);
document.getElementById("menuWrapper").style.left = (getEM - 40) / 2 + "em";
}

doCenter();

var timeOut = null;
var func = function() {doCenter()};
window.onresize = function(){
    if (timeOut != null) clearTimeout(timeOut);
    timeOut = setTimeout(func, 100);
};

Answer 6

حل جافا سكريبت بسيط، ما عليك سوى تغيير قيمة 1000 int ليكون أقل لمزيد من الاستجابة

        var resizing = false;
        window.onresize = function() {
            if(resizing) return;
            console.log("resize");
            resizing = true;
            setTimeout(function() {resizing = false;}, 1000);
        };

Answer 7

اعجبني الحل الأنيق PIM Jager، على الرغم من أنني أعتقد أن هناك تبينا إضافيا في النهاية وأعتقد أنه ربما يجب أن يكون Timeoutout "مهلة = Settimeout (Func، 100)؛"

إليك الإصدار الخاص بي باستخدام Dojo (على افتراض وجود وظيفة محددة يسمى Demo_Resize ()) ...

var _semaphorrs = null؛ DOJO.CONNECT (نافذة "تغيير حجم"، وظيفة () {en (_semaphorrs! = null) clearTimeout (_Semaphorrs)؛ _semaphorrs = settimeout (demo_resize، 500)؛})؛

ملاحظة: في الإصدار الخاص بي، هناك حاجة إلى خارطة زائدة.