JQuery оживляет медленнее каждый вызов

Question

У меня есть модальный ящик, который я открываю с помощью JQuery. Когда вызываются кнопки закрытия, модальный блок закрывается. Все работает отлично, но чем больше я открыть и закрыть окно модальное, тем дольше он принимает для коробки модальной закрыть:

window.closeModal = function() { 
    modal = $("div.modal-overlay"); 
    windowHeight = $(window).height(); 
    // Until here performance is good 
    modal.animate({top: windowHeight, }, 800, function() { 
     // This is the problem 
     modal.hide(); 
     $("body").css("overflow-y", "scroll"); 
    }); 
} 

Я положил журналы консоли на каждой строке, и все выполняется мгновенно, пока я не попал модальная функция. Каждый раз, когда я открываю модальный режим и нажимаю кнопку закрытия, требуется больше времени, пока не начнется выполнение модального.анимания.

Может ли кто-нибудь пролить свет, пожалуйста.

@EDIT: Я создал jsfiddle, который показывает проблему.

Просто нажмите открытые модальные, затем закройте модальные. Сделайте это 4-5 раз, чтобы увидеть задержка стала больше

http://jsfiddle.net/CZ54C/

@@ EDIT: Что-то очень странное происходит.

хотя openModal выполняется один раз, iframe.load исполняется # раз открывается модальное и закрытые ...

window.openModal = function (url) { 
    console.log("open start"); 
    modal = $("div.modal-overlay"); 
    modalIframe = $("div.modal-overlay iframe"); 
    windowHeight = $(window).height(); 
    modal.css("bottom", "0"); 
    modalIframe.attr("src", url + "?frame=true"); 
    modalIframe.load(function() { 
     console.log("open load") 
     modalIframe.css('height', windowHeight); 
     modal.show().animate({ 
      top: 0, 
     }, 800, function() { 
      $("body").css("overflow-y", "hidden"); 
     }); 
    }); 
} 

Answer 1

Я думаю, что я решил эту проблему,

Кажется, что за счет изменения iframe url, «обработчик нагрузки снова привязан». . Таким образом, каждый раз, когда «нагрузка выполняется», он прикреплен я ее решил с помощью этого кода:

modalIframe.one('load',function() {}); 

//Instad of 
modalIframe.load(function() {}); 

Является ли это хорошая практика

Answer 2

Вопрос заключается в том, что вы подключаете новый load обработчик modalIframe каждый раз, когда вы открываете модальный диалог.Так что если вы второй раз нажали «Открыть модальный», обратный вызов нагрузки будет выполняться два раза.

Лучший способ приблизиться к этому - переместить обработчик события нагрузки вне функции openModal i Nto том же блоке, где вы прикрепить обработчики кликов:

Working Demo

$(function() { 
    var modal = $("div.modal-overlay"), 
     modalIframe = modal.find('iframe'); 

    $("a.open").click(function (e) { 
     e.preventDefault(); 
     var href = $(this).attr("href"); 
     openModal(href); 
    }); 

    $("a.close").click(function (e) { 
     e.preventDefault(); 
     closeModal(); 
    }); 

    //put load handler here 
    modalIframe.load(function() { 
     var windowHeight = $(window).height(); 

     modalIframe.css('height', windowHeight); 
     modal.show().animate({ 
      top: 0, 
     }, 800, function() { 
      $("body").css("overflow-y", "hidden"); 
     }); 
    }); 
}); 

window.openModal = function (url) { 
    $("div.modal-overlay iframe").attr("src", url + "?frame=true"); 
} 

window.closeModal = function() { 
    modal = $("div.modal-overlay"); 
    windowHeight = $(window).height(); 
    modal.animate({ 
     top: windowHeight, 
    }, 800, function() { 
     modal.hide(); 
     $("body").css("overflow-y", "scroll"); 
    }); 
}