javascript样式仅在使用setTimeout时应用于元素

我对下面的代码段和

但是我不喜欢它，因为它只在使用间隔值等于零或加号的setTimeout时起作用

它应该在不使用setTimeout的情况下工作，这与将interval设置为零的逻辑相同

有人知道为什么没有设置超时就不能工作吗

const-PACE=4；
const CONTAINER=document.getElementById（'CONTAINER'）；
const-ANCHOR=document.getElementById（'ANCHOR'）；
常量条目=[{
“url”：“1”，
“文本”：“第1条新闻”
},
{
“url”：“2”，
“文本”：Lorem ipsum dolor sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人”
},
{
“url”：“3”，
“文本”：“第3条新闻”
},
{
“url”：“4”，
“文本”：Lorem ipsum dolor sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人”
}
];
设计数器=0；
函数getDuration（）{
返回（（ANCHOR.getBoundingClientRect（）.width+CONTAINER.getBoundingClientRect（）.width）/CONTAINER.getBoundingClientRect（）.width）*；
}
函数moveAnchor（）{
setTimeout（函数（）{
ANCHOR.style.transitionDuration=getDuration（）+'s'；
ANCHOR.style.left=（-1*ANCHOR.getBoundingClientRect（）.width）+'px'；
}, 0);
//我想用以下代码替换上述代码：
//ANCHOR.style.transitionDuration=getDuration（）+'s'；
//ANCHOR.style.left=（-1*ANCHOR.getBoundingClientRect（）.width）+'px'；
}
addEventListener（'transitionend'，function（）{
计数器++；
if（计数器===ENTRIES.length）{
计数器=0；
}
ANCHOR.href=ENTRIES[counter].url；
ANCHOR.innerHTML=条目[counter]。文本；
ANCHOR.style.transitionDuration='0s'；
ANCHOR.style.left=CONTAINER.getBoundingClientRect（）.width+'px'；
moveAnchor（）
});
moveAnchor（）
正文{
保证金：0；
填充：0；
}
#容器{
位置：固定；
排名：0；
左：0；
右：0；
高度：50px；
背景：耐火砖；
溢出：隐藏；
}
#锚定{
身高：100%；
显示器：flex；
对齐项目：居中；
颜色：白色；
位置：绝对位置；
左：100%；
过渡属性：左；
过渡时间函数：线性；
空白：nowrap；
}

设置0长度超时会将代码移动到下一个执行周期，但是在这种情况下，我不确定问题出在哪里，删除超时似乎不会影响我的功能？这只是一个提示，您可以使用纯CSS进行此操作。请看@DBS，这也有点奇怪，因为如果您删除它，并不影响它，但在没有超时的初始设置中，它会影响（很难解释这一点）@Squiggs。这是一个很好的解决方案，我将对此进行详细研究。然而，这里的要点是，我更希望理解这个setTimeout行为/问题，而不是搜索解决方案@DBS注释它是一个加号，因为它向我指出了“执行周期”，这可能是一个有趣的话题。谢谢你们的帮助和指导