如何在飞镖中一定时间间隔内更新dom元素？

问题描述

我想在简单的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，然后在稍有延迟之后，您的所有字符都会被发出，idx将会递增。>

您可以尝试以下模式，以适应您的用例：

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