SetTimeout通过单个事件执行多次

Question

我正在使用套接字从后端获取数据，该后端用于呈现chart.js条形图。目的是延迟在图形中渲染的每个条之间的时间。我在for循环中使用setTimeout来完成任务。在第一个输入中一切正常。但是，每次按下提交按钮时，条形的数量就会重复。因此，例如，第一次出现单个条带会出现延迟。但是第二次，如果我们输入的值2重复条显示在一起，并且第三次输入3条显示，它会像这样继续。我真的很困惑为什么会这样。任何帮助深表感谢

我基本上已经尝试了所有可以理解的问题，异步-等待。用settimeout分离for循环。似乎没有什么可以解释为什么会发生这种情况。

有问题的循环

for (let x = 0; x < data.length; x++) {
      console.log("value of x outsite", x);
      setTimeout(() => {

        this.chartArray.data.datasets.forEach((dataset) => {
          dataset.data.push(data[x]);

        });


        this.chartArray.update();

      }, 1000 * (x + 1));

目标是每个值仅获得一个小节，随后的小节中会有延迟。