停止js幻灯片缓存点击量

Stop js slideshow caching amount of clicks

本文关键字：缓存 js 幻灯片 停止      更新时间：2023-09-26

有人知道如何阻止此幻灯片"缓存"幻灯片中的点击量吗？如果我点击箭头10次，那么10张幻灯片就会滑过去。有办法阻止这种情况吗？或者，如果您单击相反的箭头以取消另一个的"缓存"单击？

http://www.switchonthecode.com/tutorials/jquery-creating-a-slideshow

谢谢！

使用one（）函数可能会达到您想要的效果。将代码调整为以下内容：

$(document).ready(function(){
    // The "one()" function means that this action is disconnected
    // from the element once the action occurs. In other words, click
    // it twice, and the second one does nothing.
    $("#slideshow-previous").one("click", showPreviousSlide);
    $("#slideshow-next").one("click", showNextSlide);
    ...
});

然而，仅仅这样做是不够的。动画完成后，我们必须再次连接事件处理程序。使用animate的回调函数（）：

function updateContentHolder()
{
    ...
    $("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000, function() {
        $("#slideshow-previous").one("click", showPreviousSlide);
        $("#slideshow-next").one("click", showNextSlide);
    });
}

正如评论中指出的那样，这存在将showPreviousSlide和showNextSide多次附加到未按下的按钮的问题。你可以通过多做一点工作来解决这个问题：

function showPreviousSlide()
{
    currentSlide--;
    updateContentHolder($(this).attr("id"), showPreviousSlide);
    updateButtons();
}
function showNextSlide()
{
    currentSlide++;
    updateContentHolder($(this).attr("id"), showNextSlide);
    updateButtons();
}
...
function updateContentHolder(id, callback)
{
    ...
    $("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000, function() {
        $("#" + id).one("click", callback);
    });
}

只要单击箭头（类似isPending），就可以将标志设置为true。然后每当单击箭头时都检查此项，如果为true，则忽略单击。然后，当动画完成时，将标志设置回false。

相关文章：