Question

如果我慢慢点击，我只能使照片顺利滑动但如果我点击链接快速应用程序使图片跳转到右边没有动画甚至暂停。如何解决这个问题。

<div id="carousel">
  <a href="#" id="right"></a>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

$( "#right" ).click(function() {
  $("#carousel ul").find("li:first").before($("#carousel ul").find("li:last"));
  $("#carousel ul").css({marginLeft:-480});
  $("#carousel ul").animate({marginLeft:0},500);
});

Answer 1

你想要实现节流。这将确保用户无法在第一个动画完成之前旋转轮播。

以下是一个例子：

// Global Variable
var throttleControl = false;

function functionToThrottle() {
    // Only run if not Throttling
    if( !throttleControl )

        // Turn on Throttle
        throttleControl = true;

        setTimeout(function(){ 

            /* Code to execute */

            // At end of function execution 
            // Un Throttle
            throttleControl = false
        }, /* Time of animation here */);
}

这将确保如果有人阻止点击按钮，它将仅在上一次点击事件完成后运行。

需要JQuery帮助编码滑块

1 个答案: