JavaScript超时重置机制

标签 javascript function settimeout onload cleartimeout

我想要什么: 每三秒就有两张图片切换/交换。

我想让它在单击按钮时切换图片并重置自动交换。因此,如果单击按钮,图像就会交换,三秒后,它将自动交换,直到再次单击按钮,循环将重复。

我现在拥有的 目前的问题是:当点击按钮时,会打乱自动切换的时序。

编辑: 请不要创建新的代码库。只需修改地雷即可。代码不必是专家 super 简洁的水平。我只学习 JavaScript 三周(它是我的第一种编程语言)。我必须向同学解释,如果代码中有我不理解的元素,那就不好了。非常抱歉给您带来不便。

现在我只需要按钮来正确停止和重新启动时间。

<html>
<head>
    <script>
        let reset = setTimeout(change, 3000);
        function change() {
            if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
                document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
            else {
                document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
            setTimeout(change, 3000);
        }
        function fastChange() {
            clearTimeout(reset);
            if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
                document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
            else {
                document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
            }
        }
    </script>
</head>
<body>
    <input type="button" onclick="fastChange();">
    <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" id="picture">
</body>
</html>

最佳答案

您的计时器重置的原因是您没有清除超时。

您需要引用超时,然后在进行快速更改时对其使用clearTimeout()。我认为按照您的方式内联执行此操作是不可能或明智的,因此您的代码需要重构

let imgSrc1 = 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350'
let imgSrc2 = 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350'

let imgElement = document.getElementById('picture');
let timeout;

function change() {
   if(imgElement.src === imgSrc1) {
      imgElement.src = imgSrc2;
   } else {
      imgElement.src = imgSrc1;
   }
   if (timeout) {
      clearTimeout(timeout);
}

   timeout = setTimeout(change, 3000);
}

您甚至不需要第二个函数 fastChange。现在您可以像这样将 onClick 监听器发送到 change()

document.getElementById('无论你想点击什么').onCLick = change;

关于JavaScript超时重置机制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53549831/

相关文章:

javascript - AngularJS - 在没有 jQuery 的指令中将 HTML 元素添加到 dom

javascript - catch block 中的 Redux-saga 产量 put() 未执行

javascript - 获取给定 JavaScript 范围内的解析函数

javascript - setTimeout函数中未指定延迟是否意味着零延迟?

javascript - Jquery/Javascript 插件不会重复

javascript - 在解析期间检测内容中的正则表达式

python - 打印空行Python的函数

c++ - 函数类型之间的区别

Javascript setTimeout 在 ajax 加载的页面中触发多次

javascript - 如何在每次函数调用前等待 setTimeout?