为什么text（）函数执行之前淡出（）函数

Question

我试图做到以下几点：

1. 淡出div
2. 更改其文本
3. 淡入它再次

问题是，第2步发生在第1步之前。为什么会发生这种情况？

下面的代码：

<p id="p"> 
    hi! 
</p> 
<button onclick="foo()"> 
    wefew 
</button> 
<script> 
    $("button").click(function(){ 
     var item = $("#p"); 
     item.hide("slow"); 
     item.text("text"); 
     item.show("slow"); 
    }) 
</script> 

https://jsfiddle.net/pq35yd5t/ 编辑： 我发现，问题是，我使用了一个for循环和回调函数只对HT ELAST循环工作...为什么，再次 代码：

for (var i = 0; i < ob_prop.length; i++) { 
     if (ob_prop[i]=="tag") { 
      continue; 
     } 
     var item = $("#"+ob_prop[i]); 
     item.hide("slow", function() { 
      item.text(work[pointer][ob_prop[i]]).show("slow"); 
     }); 
    } 

Answer 1

由于衰落是一个异步操作。

做你做什么，请使用hide回调：

$("button").click(function(){ 
    var item = $("#p"); 
    item.hide("slow", function() { 
     item.text("text"); 
     item.show("slow"); 
    }); 
}) 

---

在评论你说：

好，我都尝试过，但在原始代码有一个循环和功能只在循环结束时工作

回调将有this设置为与回调的元素，所以使用，而不用item：

$("button").click(function(){ 
    var item = $("#p"); 
    item.hide("slow", function() { 
     $(this).text("text").show("slow"); 
    }); 
}) 

---

你最新编辑在循环问题关闭。见这个问题的答案的详细信息，但解决方案之一是使用$.each（或Array.prototype.forEach，如果你不担心过时的浏览器，如IE8）：

$.each(function(index, ob) { 
    if (ob != "tag") { 
     $(ob).hide("slow", function() { 
      $(this).text(work[pointer][ob]).show("slow"); 
     }); 
    } 
});