javascript库原型函数没有一个接一个地执行答案

【问题标题】：javascript library prototype functions not executing one after the otherjavascript库原型函数没有一个接一个地执行
【发布时间】：2013-10-25 12:22:33
【问题描述】：

我正在开发一个 javascript 库。这是基本代码：

(function(){
        var int,
            method,
            Jist = function(s){
                return new Jist.fn.init(s);
            };
        Jist.fn = Jist.prototype ={
            init : function(s){
                if(!s){
                    return this;
                }
                else{
                    this.length = 1;
                    if (typeof s === "object"){
                        this[0] = s;
                    }
                    else if(typeof s === "string"){
                        var obj;
                        obj = document.querySelectorAll(s);
                        this[0] = obj;
                        this.elem = this[0];
                    }
                    return this;
                }
            },
        }
        Jist.fn.init.prototype = Jist.fn;
        Jist.fn.init.prototype = {
            print : function(txt){
                for(var i=0; i<this.elem.length; i++) {
                    this.elem[i].innerHTML = txt;
                }
                return this;
            },
            click : function(callback){
                for(var i=0; i<this.elem.length; i++) {
                    this.elem[i].addEventListener("click",callback,false);
                }
                return this;
            },
            fadeOut : function(ms) {
                var elem = this.elem;
                var opacity = 1,
                    interval = 50,
                    gap = interval / ms;
                function func() { 
                    opacity -= gap;
                    for(var i=0; i<elem.length; i++) {
                        elem[i].style.opacity = opacity;
                    }
                    if(opacity <= 0) {
                        window.clearInterval(fading); 
                        for(var i=0; i<elem.length; i++){
                            elem[i].style.display = 'none';
                        }
                    }
                }
                var fading = window.setInterval(func, interval);
                return this;
            },
            fadeIn : function(ms) {
                var opacity = 0,
                    interval = 50,
                    gap = interval / ms,

                    elem = this.elem;
                    for(var i=0; i<elem.length; i++){
                        elem[i].style.display = 'block';
                        elem[i].style.opacity = opacity;
                    }
                function func() { 
                    opacity += gap;
                    for(var i=0; i<elem.length; i++){
                        elem[i].style.opacity = opacity;
                    }
                    if(opacity >= 1) {
                        window.clearInterval(fading);
                    }
                }
                var fading = window.setInterval(func, interval);
                return this;
            }
        };
        window.Jist = window.jist = window.Jis = window.jis = window.Jit = window.jit = window._ = Jist;
})();

这是我在正文部分中用来测试库的内容：

<div id="fader"></div>
<input type="button" id="inpt" value="click"></input>
<script>
jist("#inpt").click(function(){
    jist("#fader").print("FooBar").fadeOut(1000).fadeIn(1000).print("");
});
</script>

jist("#fader").print("FooBar").fadeOut(1000).fadeIn(1000).print(""); 行应该将文本“FooBar”放入 div（它确实如此）然后淡出，然后淡入并从 div 中擦除文本。

但是相反，它开始淡出，然后迅速尝试淡入。那是因为所有函数都是同时执行的，而不是一个接一个。

有谁知道我可以如何更改我的库以便发生这种情况？这是一个类似 jQuery 的库，所以我希望它的工作方式类似于查询。

非常感谢！

【问题讨论】：

为什么不直接使用jQuery呢？或者至少看看他们的代码？在 jQuery 中，每个 DOM 元素都附加了一个动画队列，您可以在其中插入要执行的操作。
当然它们是同时执行的，因为你同时调用它们
@lombausch 这是一个基于 jquery 的库，在 jquery 中，您可以同时调用函数，而它们仍然动态执行。
在 jquery 中，当使用例如淡入淡出时，您将使用回调。否则它也会异步执行。
不，那行不通。 1.）你必须把你的第二个作为你第一个的回调，2）你当然必须调用它。谷歌“JS回调”

标签： prototype javascript

【解决方案1】：

我不会进入你的长代码，但这里是你应该如何做的简短示例

// this is how you do it
m1.myFirst().mySecond();

//this is via callback
m2.myFirst(function(){
    m2.mySecond();
});

fiddle

【讨论】：