javascript - 与 Jquery 延迟作斗争

Question

我通过使用 jquery 操作 “margin-left” 选项创建了一个轮盘动画。我希望它在每次滚动后回到起始位置，所以我尝试在每次滚动后 5 秒重置 “margin-left”。

$(document).ready(function() {
  $("#roll").click(function() {
    $("#roulette").css("margin-left","-3000px").delay(5000);
    $("#roulette").queue(function() {
        $('#roulette').css("margin-left","0px");
      }).dequeue();
  });
});

HTML:

<div class="row roulette-outer">
    <div class="row roulette" id="roulette">
      <div class="skins"><img class="img-thumbnail" src="images/1.png"></img></div>
      <div class="skins"><img class="img-thumbnail" src="images/2.png"></img></div>
      ...
    </div>
</div>
<button class="btn btn-danger center-block" type="button" id="roll">Klick</button>

它工作正常，但我必须双击“滚动”按钮，否则它不会移动。

Answer 1

.dequeue() 方法使排队的函数立即执行，将#roulette 元素移回其原始位置。代码实际上只有在队列中已有内容时才会起作用。

您正在做的事情不需要复杂的排队，因此可以稍微简化代码，最好是使用 vanilla JavaScript 来处理延迟代码，请参阅 the discussion here .

这将给出您正在寻找的行为:

  $(document).ready(function() {
  $("#roll").click(function() {
    $("#roulette").css("margin-left","-3000px");
    window.setTimeout( function() { $("#roulette").css("margin-left","0") }, 5000 );
  });
});