Question

我正在尝试在对象中添加sleep方法，该方法可以在方法链的中间调用。我考虑使用setTimeout（），但是无法阻止javascript线程，并且它无法输出我想要的正确顺序。

<div id="test"></div>

 function hello(str){
  var text = document.getElementById("text");
  this.eat = function(kind){
    text.innerHTML += "<p>Eat "+ kind + "</p>";
    return this;
  }
  this.sleep = function(delay){
    setTimeout(function(){
      text.innerHTML += "<p>Sleep "+delay + "</p>";
    }, delay);
    return this;
  }
  text.innerHTML += "<p>Hello, "+ str + "</p>";
  return this;
}
var test = hello("guy").sleep(3000).eat("dinner"); 
/* I want an output as: 
      Hello, guy -> (wait 3 secs) Sleep 3000 -> Eat dinner
   But actually the output is:
      Hello, guy -> Eat dinner -> (wait 3 secs) Sleep 3000    
*/

有没有人有任何想法？我会使用原型或其他一些方法来处理它吗？更重要的是，如果我想在此对象中添加另一个名为sleepFirst的方法。当我这样称呼它时：

var test2 = hello("boys").sleepFirst(2000).eat("lanch")

输出：
（等待2秒）sleepFirst 2000 - ＆gt;你好，男孩 - ＆gt;吃lanch

我该怎么办？（后记：我是网络开发的初学者，也许有人之前曾问过类似的问题，但我搜索了很长时间但找不到它T ^ TI我是中国人，对不起，我的英语似乎不那么好的。谢谢~~）

Answer 1

@RobG说服我使用真实对象定义重写你的代码片段。 JsFiddle here。

var sleeper = {
    text: document.getElementById("text"),
    eat: function (kind) {
        text.innerHTML += "<p>Eat " + kind + "</p>";
        return this;
    },
    sleep: function (delay, func, param) {
        setTimeout(function () {
            func(param);
            //text.innerHTML += "<p>Sleep " + delay + "</p>";
        }, delay);
        return this;
    },
    hello: function (str) {
        text.innerHTML += "<p>Hello, " + str + "</p>";
        return this;
    }
};

sleeper.hello("guy").sleep(3000, sleeper.eat, "dinner");

这样好多了。但是这样你就不会能够执行多个电话链。

在对象方法链（JS）中添加sleep方法

1 个答案: