Javascript 能不能纯粹的同步方式执行代码？

现在我有一个需求是

有 N 组数据，每组三个数字 x,y,z

按顺序显示内容， x 显示 1000ms, 休息 250ms ， y 显示 1000ms, 休息 250ms ， z 显示 1000ms

又因为有某种原因，只能用 web 写，所以只能用没写过的 javascript 假设现在有一个 <div class=box></box>

我最初写的代码是这样的

// 网上找的 sleep 代码
function sleep(n){
        var  start=new Date().getTime();
        while(true) if(new Date().getTime()-start>n)  break;
    }
    
    $(".box").html(x)
    sleep(1000)
    $(".box").html("")
    
    $(".box").html(y)
    sleep(1000)
    $(".box").html("")
    
    $(".box").html(z)
    sleep(1000)
    $(".box").html("")
    

实验证明， 他会卡死在最开始的界面，然后时间到了就没了。 这样可以做到延时，可是显示的效果没有出来，弃。

jquery.delay() 只对动画效果有效，弃

所以现在采用的是 setTimeout 的方法

$(".box").html(x)
    setTimeout(function(){
    	$(".box").html("")
    }, 1000)
    
    setTimeout(function(){
    	 $(".box").html(y)
    }, 1250)
   
   setTimeout(function(){
    	$(".box").html("")
    }, 2250)
	....

这样可以实现，然后如果多组数据的话也可以用一个变量来记录延时的时间值

假如我把上面的代码封装成一个函数display() 那么接下来我的代码就会显得很干噶

display()

do something....

后面的代码就会在数字显示完成之前执行了。 也就是说，如果我一个地方出现了setTimeout 其他地方就得被迫无奈地都用上。 即

display()

setTimeout(function(){
	do something...
}, display()所延时的时间).

So. 有没有一种像最开始的那种方案来解决这个问题？？

PS ： 我不会写 JS ，所以没办法， 做一次伸手党吧。