每次调用 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");
    });
}

我在每一行都放置了控制台日志，一切都会立即执行，直到我点击 modal.animate 函数。每次我打开一个模态框并按下关闭按钮时，modal.animate 开始执行需要更多时间。

谁能给点启示。

@编辑： 我创建了一个显示问题的 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。因此，如果您第二次单击“打开模式”，则加载回调将执行两次。下次点击会执行3次，以此类推。

解决此问题的最佳方法是将 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");
    });
}