Question

美好的一天：我正在创建一个小而简单的软件来逐字拼写单词，我可以拼写一个字母，但到目前为止我还没有设法拼写单词字母。问题是我还没有设法理解时间函数在javascript中是如何工作的。我有两个函数，下面写了一封信，它工作正常：

    //play the sound
    function playSound(soundfile) {
      document.getElementById("dummy").innerHTML= 
              "<embed src='"+soundfile+"' hidden='true' autostart='true' loop='false' />";          
    }

和另一个应该每2秒半调用一次这个函数来说明下一个字母，直到这个单词结束，但我尝试了一些函数，似乎没有什么对我有用。我只需要一个等待2500毫秒的函数，并再次调用下一个函数，并使用该单词的下一个字母进行拼写。

 function timingSpell (i){
        if (i == 0){
            var wordToSpell = document.getElementById("WordToSpell");
            var aux = wordToSpell.value;
        }
        var myVar=setInterval(function(){playSound('sounds/'+aux[i]+'.mp3')},2500);
        i++;
        timingSpell(i);                        
    }

WordToSpell是一个带有单词作为值的文本框架。现在发生的事情就是只说出这个词的最后一个字母。如果任何人可以在再次执行函数之前给出任何关于如何让javascript等待一段时间的想法，我将不胜感激。先谢谢你。

Answer 1

尝试将timingSpell更改为：

function timingSpell (){
    var wordToSpell = document.getElementById("WordToSpell");
    var aux = wordToSpell.value;
    var i=0;

    var myInterval = setInterval(function(){
        playSound('sounds/'+aux[i]+'.mp3');
        alert(i + '' + aux[i]);
        i++;
        if(typeof aux[i] === "undefined"){
            clearInterval(myInterval);
        }

    },2500);
}

有一些值得一看的事情：

具有无条件调用自身的函数是递归函数调用的潜在指示符（导致stackoverflow错误！）
你应该在你的功能开始时声明我，而不仅仅是希望它是0。
setInterval功能内部增量，而不是外部增加（否则计算机将在2.5秒之前通过循环增加
当您的单词结束时使用clearInterval。

Answer 2

将函数timingSpell切换为：

function play() {
    var wordToSpell = document.getElementById("WordToSpell");
    var aux = wordToSpell.value;

    function timingSpell(i) {
        if (i >= aux.length) {
            return;
        }
        var myVar = setTimeout(function () {
            playSound('sounds/' + aux[i] + '.mp3');
            i++;
            timingSpell(i);
        }, 2500);
    }
    timingSpell(0);
}

新函数使用递归。

Answer 3

您可以尝试这样的事情。使用setTimeout被认为比setInterval更好，因为JS的事件循环起作用的方式很复杂。出于本示例的目的，我传入了单词div，其中该单词将作为readWord函数的参数出现。

该函数设置一些变量和一个命名的匿名函数（是），以便setTimeout起作用。 readLetter函数在首次运行函数时立即调用，然后依赖setTimeout继续。这里重要的是检查字母数是否小于单词中的字母数。

var word = 'foshizzle';
var div = document.getElementById('div');

function readWord(word, el) {
  var pos = 0;
  var duration = 2500;
  var text = '';
  var readLetter = (function readLetter () {
    if (pos < word.length) {
        var letter = word.substr(pos, 1);

        // show or say letter here
        playSound('sounds/' + letter + '.mp3')
        text += letter;
        div.innerHTML = text;
        pos++;
        setTimeout(readLetter, duration);
    }
  })();
}

readWord(word, div);

<强> Demo

Answer 4

@Andy给出的答案帮助很大，这就是它目前工作正常的方式：

     //read a full wod.
    function readWord() {
      var word = document.getElementById('WordToSpell').value;
      var pos = 0;
      var duration = 2500;
      var text = '';
      var readLetter = (function readLetter () {
        if (pos < word.length) {
            var letter = word.substr(pos, 1);
            // show or say letter here
            playSound('sounds/' + letter + '.mp3');
            //text += letter;
            //div.innerHTML = text;
            pos++;
            setTimeout(readLetter, duration);
        }
      })();
    }

原始的唯一修改是最小的，只是为了将其添加到我当前的特定问题中。任何方式我都欣赏其他答案，他们也非常相似我所需要的，谢谢你们...我感谢你的帮助。

Javascript时间函数拼写单词

4 个答案: