如何在 Blazor 中模拟 setTimeout()? [英] How to emulate setTimeout() in Blazor?

问题描述

我正在尝试在 Blazor 中复制一个简单的 JS 方法.这个想法是输入给定单词/句子/等中的每个字符.W3Schools 有一个很好的例子，说明了一个快速的方法.那么给出他们的例子，如何在 C# 和 JS 中做同样的事情?

var i = 0;var txt = 'Lorem ipsum 虚拟文本 blabla.';无功速度= 50；函数 typeWriter() {如果(我< txt.length){document.getElementById("demo").innerHTML += txt.charAt(i);我++;setTimeout(typeWriter, speed);}}

我确定这不是一个很好的方法，因此在这里，但我认为必须有一种方法通过线程来做与 setTimeout 相同的事情不知道如何去掺杂那个.还尝试通过代码隐藏中的变量更新 HTML.

以下是我迄今为止尝试过的:

HTML:

@信息

Blazor 背后的代码:

使用 System.Threading;命名空间 MyApp.Pages{公共部分类索引{私有静态字符串消息="；private static string toType = "Lorem ipsum dummy text blabla.";私有静态 int charIndex = 0;protected override void OnInitialized(){整数秒 = 5000;var timer = new Timer(TypeMessage, null, 0, seconds);}protected static void TypeMessage(object o){if (charIndex < toType.Length){消息 = 消息 + toType[charIndex];字符索引++；}}}}

感谢您提供有关执行此操作的最佳方法的任何建议！

解决方案

尝试类似的事情

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

I'm trying to replicate a simple JS method but in Blazor. The idea is to type out every char in a given word/sentence/etc. W3Schools has a great example of a quick way to do this. So given their example how does one do the same thing in C# as in 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);
  }
}

I'm sure this isn't that good a way to do it, hence being here, but I think that there has to be a way via Threading to do the same thing as setTimeout just not sure how to go about doping that. Also trying to update the HTML via a variable in the code-behind.

Below is what I have tried so far:

HTML:

<div>
  @message
</div>

Blazor Code Behind:

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++;
            }
        }
    }
}

Any advice on what's the best way to do this is appreciated!

解决方案

Try something like

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

这篇关于如何在 Blazor 中模拟 setTimeout()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！