setTimeout 循环中超出了最大调用堆栈大小

Question

我的功能有问题。这是一个函数，当你按下一个按钮时，它会一个一个地显示数组中的每个单词，持续一秒钟，但出于某种原因，它告诉我我打电话太多了，尽管一定要放一个循环来检查它是否可以调用。在这里

var liste = ["one", "two", "three", "four", "five"]; //Changer la liste par la liste de syllabes qu'on veut travailler. Je ne sais pas encore comment l'importer d'un fichier txt
    var text = document.getElementById("myText");
    var btn = document.getElementById("myBtn");
    btn.addEventListener("click", showsyll(liste));

    function showsyll(arr) {
        var i=0;
            if (i < arr.length) {
                text.innerHTML= arr[i++];
                setTimeout(showsyll(arr), 1000);
            }
            else {
                return
            }
        }

html部分超级简单，只有一个按钮和一个文本id

<p id="myText"></p>
<button type="button" id="myBtn">Press to show syllables</button>

Answer 1

首先，你的 i 总是为零，因为它在你的回调函数中定义，我在箭头函数中调用了你的函数，现在它正在工作：

    var liste = ["one", "two", "three", "four", "five"];
        var text = document.getElementById("myText");
        var btn = document.getElementById("myBtn");
    
        var i;
        btn.addEventListener("click", ()=>{
            i=0;
            showsyll(liste);
        });
        function showsyll(arr) {
                if (i < arr.length) {
                    text.innerHTML= arr[i];
                    i+=1;
                    setTimeout(()=>{
                        showsyll(arr);
                    }, 1000);
                }
                else {
                    return
                }
            }

    <p id="myText"></p>
    <button type="button" id="myBtn">Press to show syllables</button>

setTimeout 循环中超出了最大调用堆栈大小

Maximum call stack size exceeded in setTimeout loop

javascript

settimeout