javascript - 事件有时不触发

Question

我有以下代码，它只是隐藏主菜单并显示下一个预期菜单，它完全按照我想要的方式工作，但并非总是如此，主菜单不会隐藏，因此您最终会得到两个重叠的菜单，这很麻烦我。

为了简单起见，我缩短了代码，仅显示此特定菜单的事件。

$('.tileButton').click(function() {
    $('.bottomPiece', this).animate( { bottom: "+=50px", easing: "easeInOutBack" }, 'fast', function() {
        $('#mainMenu').hide("drop", {direction: "down", easing: "easeInOutBack"}, 1000, function() { 
            $('#backButton').fadeIn(300);
        });
    });
});


$('#media').click(function() {
    $('body').animate({ backgroundPositionX: "-=1000px", backgroundPositionY: "+=1000px"  }, 1500, function() {             
        $('#videoPlayerParent').show("drop", {direction: "down", easing: "easeInOutBack"}, 750);
    });
});

因为我对此还很陌生，所以我不太确定，但我怀疑这是因为我同时在同一个项目上调用两个点击事件。但我对此并不确定，而且问题发生的速度非常难以预测，因此测试很困难。有时它会连续工作 20 次就可以了，但它通常会在您最意想不到的时候发生。

这是双击事件的问题还是我做错了什么？

我创建了一个 jsfiddle 来演示它。缺乏大部分功能，它是一个只是为了学习网络编码而制作的个人项目。我将大部分代码添加到下面链接的 jsfiddle 中，但并没有真正按照预期显示。 (也是 Jsfiddle 的新手)但是我在 JSFiddle 中也出现了同样的问题。

http://jsfiddle.net/9r545swy/2/

在本例中专门讨论“媒体”按钮，因为这是迄今为止我添加的唯一页面。

有时会发生的情况的图像: /image/2ccw8.jpg

JSFiddle 有点困惑，所以这里有一个实际的例子: http://flyingwhal.es/

(在 Chrome 上效果最好，因为它根本没有优化)

Answer 1

更新:

这个问题可能是 Stella 发现的 bug 的结果，因此这不是答案，但希望能指出正确的方向。

------------------------------------------------------------ -------------------------------------------------- ----------------------------------

这个问题很难发现，我认为当您在播放器动画事件完成之前非常快地按下后退按钮时，就会出现此问题，当动画仍在滚动并且播放器尚未显示时，此代码就会出现:

$('#mainMenu').hide();
$('#videoPlayerParent').hide();

但是由于时间原因，此代码在隐藏后会出现:

$('#videoPlayerParent').show("drop", {direction: "down", easing: "easeInOutBack"}, 750);

导致页面重叠，如您所描述的。

您的解决方案重点将是使计时器保持一致或像我一样实现某种临时禁用。必须有一个更优雅的解决方案可供您研究。希望我只是为您指明正确的方向。

我的解决方案:

加载主菜单功能变为:

var loadHomeMenu = function () {
    $('#mainMenu').hide();
    //Disable the player as soon as you want to display the front page;
    $('#videoPlayerParent').addClass('disabled').hide();

    setTimeout(function () {
        $('#mainMenu').show("drop", {
            direction: "down",
            easing: "easeInOutBack"
        }, 1000, function () {});
    },
    200);
};

媒体点击功能变为:

$('#media').click(function () {
        //Removing disabled when calling for the menu;
        $('#videoPlayerParent').removeClass('disabled');
        $('body').animate({
            backgroundPositionX: "-=1000px",
            backgroundPositionY: "+=1000px"
        }, 1500, function () {

            //Checking if the player wasn't disabled meanwhile, and if not executing the show animation;
            if (!$('#videoPlayerParent').hasClass('disabled')) {
                $('#videoPlayerParent').show("drop", {
                    direction: "down",
                    easing: "easeInOutBack"
                }, 750);
            }

        });
    });