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

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 -> 你好，孩子们 -> 吃 lanch

我该怎么办？
（后记：我是Web开发的初学者，之前可能有人问过类似的问题，但我搜索了很久没有找到T^T我是中国人，对不起，我的英语可能看起来不太好很好。谢谢~~）

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

好多了。但这样一来，您将无法执行多个调用链。