Question

我在一个元素的addClass回调函数上给了一个append函数。但该功能执行两次。为什么呢？

//append new stage function---------//
var newNode;

function appendNewStage() {
  var parent = $('.ci-journey-interactions-canvas__row');
  var newStage = `<ul class="ci-journey-interactions-canvas__journey-list stage">
    <li>
      <span class="ci-journey-interactions-box__droppable-
element ci-droppable"></span>
    </li>
  </ul>`;

  var position = $(parent).find("ul:last").position();
  var width = $(parent).find("ul:last").outerWidth();
  newNode = $(newStage).appendTo(parent);
  if (remain.length > 0) {
    newNode.html(remain);
  }
  $(newNode).find('li:first-child').addClass('first-child');
  newNode.css({
    "position": "absolute",
    "left": (width + position.left - 89),
    "top": (position.top + 140)
  });
  var dropArea = $(newNode).find('.ci-droppable');
  dropArea.droppable();
  dropArea.droppable({
    accept: ".ci-draggable",
  });
  elementSelect(newNode);
};

//staging  function//
function staged(event) {
  $(".stage:last-child").addClass('staged', function(event) {
    appendNewStage();
  });
  $(".stage").find("li:not('.ui-selected')").remove();
  $(".stage").find("li.blank").remove();
  $(".stage").removeClass("stage");
}

我在按钮点击事件上触发了暂存功能。当我对分阶段回调发出警报时，它会运行两次

Answer 1

通常，jQuery的动画回调发生在每个元素。因此，如果$(".stage:last-child")匹配两个元素（因为有两个.stage元素是其父级中的最后一个子元素），您将获得两个回调 - 每个元素一个。来自[animate文档]（

回调功能

如果提供，start，step，progress，complete，done，fail和always回调在 per-element 的基础上调用...如果动画了多个元素，则每个匹配的元素执行一次回调，而不是整个动画执行一次。使用.promise()方法获取一个承诺，您可以为任何大小的动画集合附加一次触发的回调，包括零元素。

所以假设你正在使用的东西很好地与jQuery的动画内部结构（jQuery UI之一）相配：

$(".stage:last-child").addClass('staged').promise().then(appendNewStage);

使用jQuery UI addClass：

的示例

$(".stage:last-child").addClass("staged", function() {
  console.log("Callback for " + this.id);
})
.promise().then(function() {
  console.log("All done");
});

.staged {
  color: blue;
}

<div>
  <div id="first" class="stage">
    testing 1 2 3
  </div>
</div>
<div>
  <div id="second" class="stage">
    testing 9 8 7
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

（我假设您正在使用jQuery UI's addClass addition或其他将动画添加到addClass的内容.jQuery本身不会为其设置动画，因此没有回调。）

addClass的jquery回调执行两次

1 个答案: