Question

我真的不确定该怎么命名这个问题，所以我去了。

总之，我希望我的JS能够逐行工作，但我（我猜）得到了一个异步结果。

JQuery（瘦弱的版本）：

$.fn.extend({
    addContent: function(a) {
        var start = "<div>",
            end = "</div>",
            $this = $(this);
        $this.append(start+a);
        if (a == "special") {
            $this.addSpecial(c,d,e,f,g); //Many parameters
        }
        $this.append(end);
    },
    addSpecial: function(c,d,e,f,g) {
        //quite some work done here
        var b = "result";
        $(this).append(b);
    }
})

运行$("#this").addContent("special")时我想要的输出：

<div>specialresult</div>

实际输出：

<div>special</div>result

怎么办？请帮忙！

我无法在return $(this)中添加addSpecial()来对函数进行排队，因为我会在除addContent()以外的a == "special"中添加if else语句，以便不是一个好的解决方案。

Answer 1

append会自动关闭代码。因此$this.append(start+a);会创建<div>special</div>。

另一种方法是使用appendTo，如下所示：

$(function(){
    $.fn.extend({
        addContent: function(a) {
            var div= $('<div>').appendTo(this);
            div.append(a);
            if (a == "special") {
                div.addSpecial(); //Many parameters
            }
        },
        addSpecial: function() {
            //quite some work done here
            var b = "result";
            $(this).append(b);
        }
    })
    $("#this").addContent("special");
})

Fiddle

Answer 2

~~这里的问题不是async / sync~~ ，而是$ this指的是你调用addContent的原始元素，而不是动态生成的div。为什么不尝试这样的事情？

$.fn.extend({
    addContent: function(a) {
        var start = "<div>",
            end = "</div>",
            $this = $(this);
            var toAppend = start+a;
            if (a == "special") {
                toAppend += $this.addSpecial(c,d,e,f,g); //Many parameters
            }
            toAppend += end;
            $this.append(toAppend);
    },
    addSpecial: function(c,d,e,f,g) {
        //quite some work done here
        var b = "result";
        return b;
    }
})

如何删除异步功能输出？

2 个答案:

Fiddle