JavaScript超时重置机制

Question

我想要的： 每三秒有两张图片switched/swapped。

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

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

编辑： 请不要创建新的代码库。只需修改地雷即可。代码不必是专家超级简洁的水平。我进入 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>

Answer 1

您可以通过调用 setTimeout 并根据需要更新索引来完成此操作。请确保存储最新的超时 ID，以便可以在使用 clearTimeout.

重置时取消它

// store the reference to the <img> that contains the picture
const pic = document.getElementById('picture')

// store a list (array) of the two picture urls
const sources = [
  'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
  'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350'
]

// used to store a reference to the interval timer you created.
var lastTimer
// a starting index of the list (i.e. which image we are up to right now)
var index = 1

// this functions swaps the image and sets a timer
function startRotation() {
  // update the index to the next one (goes 0-1-0-1->etc)
  index = 1 - index
  // sets the .src of the image element
  pic.src = sources[index]
  // starts a 3 second timer to call this same function again
  // but also stores a reference to the timer so that it can be cancelled
  lastTimer = setTimeout(startRotation, 3000)
}

// this functions resets the timer and restarts the process
function reset() {
  // stop the current timer if there is one
  if(lastTimer){
    clearTimeout(lastTimer)
  }
  // restart the process
  startRotation()
}

// start the swapping process on start
startRotation()

<input type="button" onclick="reset();">
<img id="picture">

Answer 2

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

您需要引用超时，然后在进行快速更改时对其使用 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('whatever you want to click').onCLick = 改变；

Answer 3

在多个地方设置和清除超时都可以，但我更喜欢使用 "main loop" 和一个变量来计算帧数。

这是一个使用 setInterval 并在单击按钮时重置 timer 变量的示例：

const url1 = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
const url2 = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";

function change() {
  picture.src = picture.src == url1 ? url2 : url1;
}

var timer = 0;

setInterval(function() {
  timer++;
  time.textContent = timer;
  if (timer === 30) fastChange();
}, 100);

function fastChange() {
  change();
  timer = 0;
}

picture.src = url1;
swap.onclick = fastChange;

#picture {
  height: 70vh
}

<button id="swap">SWAP</button> <span id="time"></span><br>
<img id="picture">

Answer 4

不是您清除超时的方式：

<html>
<head>
    <script>
        var i;
        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";
            }
            i = setTimeout(change, 3000);
        }
        function fastChange() {
            clearTimeout(i);
            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";
            }
            i = setTimeout(change, 3000);
        }
    </script>
</head>
<body onload="setTimeout(change, 3000)">
    <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>

JavaScript超时重置机制

JavaScript Timeout reset mechanism

javascript

function

settimeout

onload

cleartimeout