关于React中函数执行顺序的问题

Question

在以下代码中，为什么在startClock函数之前执行sleep函数？

handleClick = () => {

        this.startClock();
        this.sleep(5000);
}

startClock = () => {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        // add a zero in front of numbers<10
        m = this.checkTime(m);
        s = this.checkTime(s);
        document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;
        console.log(h + ":" + m + ":" + s);
        var t = setTimeout(function(){this.startClock()}.bind(this), 1000);
      };

checkTime = (i) => {
        if (i < 10) {
          i = "0" + i;
        }
           return i;
        };

sleep = (timeout) => {
        var begin = new Date();
        while (new Date() - begin < timeout) {
        }
      };

我希望startClock函数先执行，但是sleep函数先执行，然后再执行startClock函数。

Answer 1

我认为这里实际发生的是先执行startClock函数，但是由于setTimeout中指定的时间为1000ms，所以sleep函数在GUI更新之前就启动了，因此GUI直到睡眠完成才更新。