javascript - 移动一些dom元素后的回调函数

Question

$('#gd').on('click', function(){
    $('.elact').insertBefore($('.elact').prev(), function(){
        console.log('done');  // doesn't work
    });
    $('#bsave').css('visibility', 'visible');  // works
});

insertBefore 也有效。

console.log 有什么问题？

Answer 1

insertBefore没有回调，因为它不是异步或动画操作。它的工作在调用返回时完成。 (CSS 动画/过渡可能让人觉得它还没有完成，但从 DOM 的 Angular 来看，它已经完成了。如果是这样，请使用 animation event 处理程序或 transition event 处理程序。)

例如:

setTimeout(function() {
    const beforeMe = $("#before-me");
    console.log(
      "Is it there before the move?",
      beforeMe.siblings(".slidein").length > 0 ? "Yes" : "No"
    );
    $(".slidein")
        .insertBefore(beforeMe)
        .on("animationend", function() {
            console.log("Animation complete");
        });
    console.log(
      "Is it there _immediately_ after the move?",
      beforeMe.siblings(".slidein").length > 0 ? "Yes" : "No"
    );

}, 3000);

.slidein {
  animation-duration: 2s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
    margin-left:0%;
    width:100%;
  }
}

.parent {
  border: 1px solid #ddd;
  height: 10em;
}

<div class="parent">
  <div id="before-me"></div>
</div>
<div class="parent">
  <div class="slidein">I slide</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>