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

我已经在每一行都放置了控制台日志，所有内容都会立即执行，直到我点击modal.animate函数。每次打开模态，然后按关闭按钮，modal.animate开始执行需要更多时间。

请有人放弃一些亮光。

@EDIT：我创建了一个显示问题的jsfiddle。

按下打开模态，然后关闭模态。执行 4-5 次以查看延迟变大

http://jsfiddle.net/CZ54C/

@@编辑：发生了一件非常奇怪的事。

虽然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网址，“加载处理程序再次附加”。因此，每次执行“加载”时，都会附加。我使用此代码解决了它：

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

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

这是好习惯吗？

Answer 2

问题是，每次打开模式对话框时，都会向load附加一个新的modalIframe处理程序。因此，如果您第二次单击“打开模态”，则加载回调将执行两次。在下一次单击时，它将执行三次，依此类推。

解决此问题的最佳方法是将openModal函数外部的加载事件处理程序移动到您附加点击处理程序的同一个块中：

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

每次调用时，JQuery的动画都会变慢

2 个答案: