Question

我试图执行以下操作：

淡出div
更改文字
再次淡出

问题是，第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 loop ...为什么，再次代码：

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

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

1 个答案: