为什么jQuery中的text（）函数在fadeOut（）函数之前执行

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");
    });
})

---

在你说过的评论中：

好的，我已经尝试过了，但是在原始代码中，有一个 for 循环，并且函数仅在循环结束时起作用

回调会将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");
        });
    }
});