时间戳

首页 > 解决方案 > JavaScript 超时重置机制

javascript - JavaScript 超时重置机制

问题描述

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

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

我现在所拥有的 目前，问题是：单击按钮时，它会弄乱自动切换的时间。

编辑： 请不要创建新的代码库。只修改地雷。代码不必是专家级的超级简洁级别。我只学了三个星期的 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>

标签： javascriptfunctionsettimeoutonloadcleartimeout

解决方案

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

您需要参考超时，然后在进行快速更改时对其使用 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;

推荐阅读