Question

我有一个淡出div的函数，加载替换HTML，然后将div淡入。当我点击顶部的导航栏将内容加载到{{时，正确调用此函数1}} div。在“关于”页面上也会调用它来加载不同的团队配置文件。

更改默认团队配置文件时会发生错误。单击以查看另一个配置文件时，该功能会重复在单击配置文件之前发生的每个“#main”更改。

该网站为https://symbiohsis.github.io/。单击“关于”，然后单击另一个配置文件，例如“B”，可以重现可见的错误。配置文件闪烁但未选中。在第一次开启后选择配置文件可以正常工作。

淡入/淡出＆amp;加载功能：

#main

导航栏监听器：

/* ajax load into $(sel) from newView (e.g. about.html) */
function loadView(sel, newView, checkOrCb, cb) {
    // one of these events will be called when animations end
    var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
    // cache element to change
    var elem = $(sel);

    // if there is a check and callback, do the check
    if (cb) {
        // if the check fails, exit
        if (!checkOrCb(elem, newView))
            return 1;
    }

    // animate out
    elem.addClass("animated fadeOut");
    // when finished load new page and animate in
    elem.one(animationEnd, function() {
        // remove fadeOut animation (while keeping elem hidden)
        elem.css("opacity", 0).removeClass("fadeOut");
        // load new page, then fadeIn
        elem.load(newView, function(text, response, ev) {
            elem.addClass("fadeIn");
            // remove opacity style and animations
            elem.one(animationEnd, function() {
                elem.css("opacity", "").removeClass("animated fadeIn");
            });
            // do the callback if one exists
            if (cb) {
                cb(elem, newView, text, response, ev);
            }
            else if (checkOrCb) {
                checkOrCb(elem, newView, text, response, ev);
            }
        });
    });
}

关于听众：

$(".nav_entry").on("click", function() {
    loadView("#main",
        `${$(this).attr("data-link")}.html`,
        function(dummy, newPage) {
            return getCurrentPage() != newPage.replace(".html", "");
        },
        function(dummy, newPage) {
            window.location.hash = newPage.replace(".html", "");
        });
});

我该如何解决这个问题？如果有人对JavaScript约定有任何提示，我错过了随意将它们添加到你的答案/评论：）

Answer 1

This StackOverflow帖子回答了我的问题/修复了错误。

问：过渡结束......但它在谷歌浏览器中有效2次。

答：这是因为Chrome会同时触发thewebkitTransitionEnd和transitionend个事件。

我使用Visual Event来查看每个对象附加了什么（以及有多少）事件侦听器。这向我展示了#main上有很多的终端转换监听器。我用Google搜索＆＃34; jquery one无效＆＃34;第一个结果就是上面引用的答案。

解决方案是拥有自己的已经成功的变量，以确保它只触发一次。

var animationEndFired = false;
elem.addClass("fadeIn");
// remove opacity style and animations
elem.one(animationEnd, function() {
    // if only fire once
    if (animationEndFired)
        return;
    animationEndFired = true;

功能意外触发

1 个答案: