Question

我正在尝试创建一个无限循环，在该循环中，元素具有自定义队列中以延迟方式延迟旋转的通知。我已经对此进行了一段时间的抨击，无论我尝试什么，它总是在没有必要延迟的情况下执行代码。您可以从中得到的任何启发将是最有帮助的。我无法使用“ fx”队列，因为我还有另一个元素需要与通知配合动画。

谢谢！

$.fn.queueNotice = function(string, delay) {
  this.queue('notice', function(next) {
    this.html(string).delay(delay);
    next();
  });
  return this;
}

var notices = setInterval(noticeLoop, 0);

function noticeLoop() {
  $("div").queueNotice("Notice 1", 1000)
          .queueNotice("Notice the second", 3000)
          .queueNotice("A third notice", 5000)
          .queueNotice("A fourth notice", 1000)
          .dequeue('notice');
}

Answer 1

来自jQuery文档：

.delay（）不能替代JavaScript的本机setTimeout函数，它可能更适合某些用例。

有趣的是，您的代码根本无法工作，因为您的this不是您想的那样-我也已为您解决了该问题

$.fn.queueNotice = function(string, delay) {
  var self = this;
  this.queue('notice', function(next) {
    self.html(string);
    setTimeout(next, delay);
  });
  return this;
}

function noticeLoop() {
  $("div").queueNotice("Notice 1", 1000)
    .queueNotice("Notice the second", 3000)
    .queueNotice("A third notice", 5000)
    .queueNotice("A fourth notice", 1000)
    .dequeue('notice');
}
noticeLoop();
setInterval(noticeLoop, 11000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

</div>

我已经做到了，所以notifyloop只运行一次（因为这很烦人：p）

Answer 2

$.fn.queueNotice = function (string, delay) {
  this.queue('notice', function (next) {
    setTimeout(function () {
      $(this).html(string);
      next();
    }, delay);
  });
  return this;
}

var notices = setInterval(noticeLoop, 10000);

function noticeLoop() {
  $("div").queueNotice("Notice 1", 1000)
    .queueNotice("Notice the second", 3000)
    .queueNotice("A third notice", 5000)
    .queueNotice("A fourth notice", 1000)
    .dequeue('notice');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在JQuery的自定义队列中使用.delay（）

2 个答案: