javascript – 在点击再次工作之前需要onclick去全程

我有这个javascript函数，我点击时使用它一定距离。 这是在从左到右的滚动条中使用，使用大约7个div。 我的问题是如何在点击再次使用之前让点击进入全程？ 问题是如果用户快速点击箭头按钮，它会重置距离，有时可能会在图像中间而不是在接缝处。 我想要完成这个代码的代码是什么？

$(function () { $("#right, #left").click(function () { var dir = this.id == "right" ? '+=' : '-='; $(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000); }); }); 

Answer 1

我认为最简单的方法是使用一个布尔标志来指示动画是否正在发生：

 $(function () { var animating = false, outerwrap = $(".outerwrapper"); $("#right, #left").click(function () { if (animating) {return;} var dir = (this.id === "right") ? '+=' : '-='; animating = true; outerwrap.animate({ scrollLeft: dir + '251' }, 1000, function () { animating = false; }); }); }); 

适合我： http ： //jsfiddle.net/BYossarian/vDtwy/4/

Answer 2

使用.off（）在发生单击后立即取消绑定，然后在动画完成后重新绑定它。

 function go(elem){ $(elem).off('click'); console.log(elem); var dir = elem.id == "right" ? '+=' : '-='; $(".outerwrapper").stop().animate({ left: dir + '251' }, 3000, function(){ $("#right, #left").click(go); }); } $("#right, #left").click(function () { go(this); }); 

jsFiddle示例

您可以在此简化示例中看到click事件在单击后立即未绑定，然后在动画完成后反弹。

Answer 3

使用自动then调用这样

 var isMoving = false; $(function () { $("#right, #left").click(function () { if (isMoving) return; isMoving = true; var dir = this.id == "right" ? '+=' : '-='; $(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000).then(function(){isMoving = false}()); }); }); 

Answer 4

我认为你错过了这样一个事实：当你进行停止（）时，你实际上将滑块定位在某个特定点。 即如果你的卷轴是1000px并且你很快就点击了两次，你可能会得到

 scrollLeft: 0 - 251 scrollLeft: -2 - 251 

所以，我认为你应该使用一个索引而不是这些+ =和 – =计算。 例如：

 $(function () { var numberOfDivs = 7; var divWidth = 251; var currentIndex = 0; $("#right, #left").click(function () { currentIndex = this.id == "right" ? currentIndex+1 : currentIndex-1; currentIndex = currentIndex < 0 ? 0 : currentIndex; currentIndex = currentIndex > numberOfDivs ? numberOfDivs : currentIndex; $(".outerwrapper").stop().animate({ scrollLeft: (currentIndex * divWidth) + "px" }, 1000); }); }); 

这种方法的一大好处是您不会禁用点击。 您可以根据需要单击多次，也可以快速完成。 该脚本仍然有效。

Answer 5

这将完美地工作：

 var userDisplaysPageCounter = 1; $('#inventory_userdisplays_forward_button').bind('click.rightarrowiventory', function(event) { _goForwardInInventory(); }); $('#inventory_userdisplays_back_button').bind('click.leftarrowiventory', function(event) { _goBackInInventory(); }); function _goForwardInInventory() { //$('#inventory_userdisplays_forward_button').unbind('click.rightarrowiventory'); var totalPages = $('#userfooterdisplays_list_pagination_container div').length; totalPages = Math.ceil(totalPages/4); // alert(totalPages); if(userDisplaysPageCounter < totalPages) { userDisplaysPageCounter++; $( "#userfooterdisplays_list_pagination_container" ).animate({ left: "-=600", }, 500, function() { }); } } function _goBackInInventory() { //$('#inventory_userdisplays_back_button').unbind('click.leftarrowiventory'); if(userDisplaysPageCounter > 1) { userDisplaysPageCounter--; $( "#userfooterdisplays_list_pagination_container" ).animate({ left: "+=600", }, 500, function() { }); } } 

Answer 6

我是第二个BYossarian的回答 。

以下是他的演示的变体，当用户在按钮上快速点击几次时，它会“跳过”动画：

 $(function () { var targetScroll = 0, outerwrap = $(".outerwrapper"); $("#right, #left").click(function () { // stop the animation, outerwrap.stop(); // hard set scrollLeft to its target position outerwrap.scrollLeft(targetScroll*251); if (this.id === "right"){ if (targetScroll < 6) targetScroll += 1; dir = '+=251'; } else { if (targetScroll > 0) targetScroll -=1; dir = '-=251'; } outerwrap.animate({ scrollLeft: dir }, 1000); }); }); 

小提琴