我正在尝试每 2 秒将一个字符添加到一个字符串中，但它不起作用，控制台中没有错误。视图

Question

我知道任务超级简单。但我不知道为什么它不起作用。下面是我如何实现的代码，据我检查 this.showStr += this.mainStr.charAt(i) 这部分没有错误，只是连接循环和 setTimer 有问题。有人看到错误了吗？

  data(){
      return {
        mainStr: "Hello, my name is Eldar and I'm web-developer",
        showStr: ''
      }
  },
  methods:{
      showString() {
        for (let i = 0; i < this.mainStr.length; ++i) {
          this.delay(i);
        }
      },
    delay(i){
      function delay() {
        setTimeout(() => {
          this.showStr += this.mainStr.charAt(i)
        }, 2000)
      }
    }
  },
  mounted(){
      this.showString();
  }

哦，对不起，我发布了错误的代码。这是一个不起作用的代码

<template>
    <p>{{ showStr }}</p>
</template>

<script>
    export default {
        name: "GreetingTitle.vue",
      data(){
          return {
            mainStr: "Hello, my name is Eldar and I'm web-developer",
            showStr: ''
          }
      },
      methods:{
          showString() {
            for (let i = 0; i < this.mainStr.length; ++i) {
              this.delay(i);
            }
          },
        delay(i){
            setTimeout(() => {
              this.showStr += this.mainStr.charAt(i)
            }, 2000)
        }
      },
      mounted(){
          this.showString();
      }

    }
</script>

Answer 1

你的错误是一次性设置了所有的定时器。您需要设置不同的计时器来按时间间隔调用您的函数，例如：

const mainStr = "Hello, my name is Eldar and I'm web-developer";
let showStr = '';

for (let i = 0; i < mainStr.length; ++i) {
  delay(i);
}

function delay(i){
  setTimeout(() => {
    showStr += mainStr.charAt(i)
    console.log(showStr);
  }, 300 * i)
}

UP: Vue版本（傻瓜版）：

new Vue({
  name: "GreetingTitle.vue",
  data(){
      return {
        mainStr: "Hello, my name is Eldar and I'm web-developer",
        showStr: ''
      }
  },
  methods:{
      showString() {
        for (let i = 0; i < this.mainStr.length; ++i) {
          this.delay(i);
        }
      },
    delay(i){
        setTimeout(() => {
          this.showStr += this.mainStr.charAt(i)
        }, 300 * i)
    }
  },
  mounted(){
      this.showString();
  }
}).$mount('#container');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='container'>
    <p>{{ showStr }}</p>
</div>

我正在尝试每 2 秒将一个字符添加到一个字符串中，但它不起作用，控制台中没有错误。视图

I'm trying adding a to a string a char every 2 seconds, but it diesn't work, no errors in a console. Vue

javascript

settimeout

vue.js