javascript - 如何在 Blazor 中模拟 setTimeout()?

标签 javascript c# settimeout blazor

我正在尝试复制一个简单的 JS 方法,但在 Blazor 中。这个想法是在给定的单词/句子/等中输入每个字符。 W3Schools有一个很好的例子来快速做到这一点。因此,鉴于他们的示例,如何在 C# 中和在 JS 中做同样的事情?

var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
我确信这不是一个很好的方法,因此在这里,但我认为必须有一种方法通过线程来做与 setTimeout 相同的事情。只是不知道如何去兴奋剂。还尝试通过代码隐藏中的变量更新 HTML。
以下是我迄今为止尝试过的:
HTML:
<div>
  @message
</div>
Blazor 代码背后:
using System.Threading;

namespace MyApp.Pages
{
    public partial class Index
    {
        private static string message = "";
        private static string toType = "Lorem ipsum dummy text blabla.";
        private static int charIndex = 0;

        protected override void OnInitialized()
        {
            int seconds = 5000;
            var timer = new Timer(TypeMessage, null, 0, seconds);
        }

        protected static void TypeMessage(object o)
        {
            if (charIndex < toType.Length)
            {
                message = message + toType[charIndex];
                charIndex++;
            }
        }
    }
}

任何关于什么是最好的方法的建议都值得赞赏!

最佳答案

尝试类似的东西

Task.Run(async() =>
{
  for (int i=1; i <= Message.Length; i++) 
  {
      TextToShow = Message.Substring(0, i);
      InvokeAsync(StateHasChanged);
      await Task.Delay(500);
  }
}) ;

关于javascript - 如何在 Blazor 中模拟 setTimeout()?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63532483/

相关文章:

c# - Braintree Drop-In UI Paypal 集成未加载

c# - 从堆栈面板中删除元素

node.js - 如何在 NodeJS 中创建无限循环

javascript - 停止 setTimeout 延迟首次运行

javascript - 在 React 中点击删除项目

javascript - 是否可以安排启动 Chrome 应用程序并定期运行某些命令?

javascript - Node : Can Passport be used to make Twitter API queries?

java - getJSON JavaScript 函数返回 undefined object

c# - 将 DataGridView 控件中列的数据绑定(bind)到 .NET Chart 控件

node.js - setTimeout 在 nodeJS 中不起作用