在 object 方法链中添加睡眠方法(JS)

Question

我正在尝试在 object 中添加一个睡眠方法，它可以在方法链的中间调用。我考虑过使用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    
*/

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

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

它输出：
（等待 2 秒）sleepFirst 2000 -> 你好，孩子们 -> Eat lanch

我该怎么办？
（后记：我是Web Development的初学者，可能以前有人问过类似的问题，但是我找了很久都没有找到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");

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

在 object 方法链中添加睡眠方法(JS)

Add a sleep method in a object method chain(JS)

javascript

settimeout

method-chaining