如何在飞镖中以一定的时间间隔更新dom元素？答案

【问题标题】：How to update dom element in certain interval of time in dart?如何在飞镖中以一定的时间间隔更新dom元素？
【发布时间】：2021-02-15 04:42:49
【问题描述】：

我想在简单的 Web 应用程序中创建文本输入效果。这是我第一次将 dart 用于 Web 应用程序。我做了这样的事情。

var chars = "Hello World".split('');
    var textstream = Stream<String>.fromIterable(chars);

    var idx = 0;
    textstream.listen((data) {
      Future.delayed(Duration(milliseconds: idx * 200), () {
        var element = querySelector('#hero-keyword');
        element.appendText(data);
        idx++;
      });
    });

我的 html 有这个

<p id="hero-keyword"></p>

但是，我希望以 200 毫秒的间隔打印每个字母。但我得到的是，所有字母同时出现。

【问题讨论】：

异步的东西不像循环那样工作。 idx 在延迟的未来完成之前不会更新。 fromIterable 流将“一次”发出它的所有值，但延迟的期货将等待事件循环的下一次通过。实际上，这意味着您正在以0 的延迟延迟每个未来。也许可以代替fromIterable，尝试Stream.periodic，并在每个句点上发出原始字符串的computationCountth 字符？

标签： dart dart-polymer dart-html dart-webui

【解决方案1】：

您的idx 变量仅在延迟的未来完成时更新，这将发生在事件循环的第一次通过在指定的延迟之后。

fromIterable 但是，将按顺序一次处理所有值。总而言之，最终效果是您的所有延迟都设置为 0，然后，稍微延迟后，您的所有字符都将发出，idx 将增加。

您可以尝试以下模式，改为根据您的用例进行调整：

void main() {
  var text = "Hello world";
  Stream
    .periodic(Duration(milliseconds: 200), (count) {
      print(text[count]);
    })
   .take(text.length)
   .drain();
}

【讨论】：