javascript - 动画/s 窃听之前它完成

Question

平台: ASP.Net Web Forms Application

工具:Visual Studio 2013(之前是 2012)

数据库: SQL Server 2014(本地)/SQL Server 2012(在线)

这是我的个人 website ，这是我正在研究的。 (不要犹豫，输入，它几乎是空白的，并且保证不会造成伤害，因为我是网络发布方面的新手。)

我尝试实现的场景类似于 MAC OS X Finder 实现。

---

工作总结:

我还通过 jQuery 方法使用 addClass()/removeClass()/toggleClass() 组合实现了 CSS 过渡动画为元素的某个部分实现.animate()。第一个用于动画书籍的交互，例如选择一本书通过转换元素的几个属性(边框、颜色、不透明度等)将其与其他书籍区分开来，甚至应用于伪类，如 :hover。后者 (.animate) 与制作平滑的水平滚动内容的想法有关。实际上，当从当前书籍中选择另一本书时，它会向左/向右移动书籍的整个容器。我添加了箭头键功能(← 和 →)以在书籍之间导航。

---

问题:

一切都很好(不是吹牛!)写到网站被窃听(垃圾输入)为止。如果您要在我已为其分配上述键的书籍之间快速导航，它会导致书籍容器的左/右动画出现错误，并且会导致一些书籍因更改其相关类别而出现故障。

P.s.:我没有在这里做任何 fiddle 或代码片段，因为通过浏览器的 Inspect Element，从网页到客户端的所有内容都是可见的。如果有人要求提供代码，我会毫不犹豫地编辑我的问题。

Answer 1

这个实现怎么样。

替换

$(document).keydown(function (e) {
    switch (e.which) {
        case 37: // left
            var prevBook = $(".bookMain").prev()[0];
            selectBook(prevBook);
            break;

        case 39: // right
            var nextBook = $(".bookMain").next()[0];
            selectBook(nextBook);
            break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

与

var animation = false;
$(document).keydown(function (e) {
    switch (e.which) {
        case 37: // left
            if(!animation){
                animation = true;
                var prevBook = $(".bookMain").prev()[0];
                if(typeof prevBook == "undefined")
                    animation = false;
                else
                    selectBook(prevBook);
                setTimeout(function(){animation = false;},500);
            }
            break;

        case 39: // right
            if(!animation){
                animation = true;
                var nextBook = $(".bookMain").next()[0];
                if(typeof nextBook == "undefined")
                    animation = false;
                else
                    selectBook(nextBook);
                setTimeout(function(){animation = false;},500);
            }
            break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

更新

添加了一个 if 条件来解决在最后一张幻灯片中按下右侧而从第一张幻灯片中按下左侧时出现的控制台错误