递归 setTimeout() 函数在 javascript 中不重复

Question

我的 setTimeout() 函数在第一个运行秒后不再重复。它运行最初在“Window.onload”中，但“myHandler”函数中的第二个 setTimeout() 运行

问题区域：变量超时；

        window.onload = function(){
   timeout = setTimeout(myHandler, 5000);
};

function myHandler() {
    i++;
   timeout = setTimeout(myHandler, 10000)
}

HTML中的完整代码：

<html>
<body>
    <iframe id="myVideo" allowfullscreen="true" height="720"
    width="1280"></iframe>
    

    <script type="text/javascript">

        var videoSource = new Array();
        videoSource[0] = 'xxx';
        videoSource[1] = 'xxx';

        var i = 0; 
        var videoCount = videoSource.length;
        var timeout;

        window.onload = function(){
   timeout = setTimeout(myHandler, 5000);
};

function myHandler() {
    alert('run')
    i++;
    if (i == (videoCount - 1)) {
        i = 0;
        videoPlay(i);
    } else {
        videoPlay(i);
    }
     
    timeout = setTimeout(myHandler, 10000)
}   



function videoPlay(videoNum) {
    document.getElementById("myVideo").setAttribute("src", `${videoSource[videoNum]}&parent=localhost&autoplay=true&muted=false`);
    document.getElementById("myVideo").load();
    document.getElementById("myVideo").play();
}
videoPlay(0); // play the video


    </script>
</body>
</html>

Answer 1

我在本地运行代码，我在 videoPlay 函数上遇到了一些错误。我认为 setTimeout 没有错，但是当 javascript 崩溃时，该函数不会再次运行。尝试评论 videoPlay 调用，代码将运行.

考虑使用 setInterval 而不是 setTimeout。而且您不需要在 if 和 else 上调用 videoPlay，您可以将其重构为

if (i == videoCount - 1) 
  i = 0
videoPlay(i)

Answer 2

事实证明，我解决了自己的问题：

document.getElementById("myVideo").load();
    document.getElementById("myVideo").play();

不是 iframe 的函数，它不是运行我的其余代码。

感谢大家的帮助和意见。

递归 setTimeout() 函数在 javascript 中不重复

recursive setTimeout() function not repeating in javascript

html

javascript

settimeout