在 Javascript 中使用 setInterval 和 clearInterval 需要帮助答案

【问题标题】：Need help to use setInterval and clearInterval in Javascript在 Javascript 中使用 setInterval 和 clearInterval 需要帮助
【发布时间】：2020-06-23 23:39:10
【问题描述】：

我正在创建一个 Web 小部件，我试图根据从下拉列表中选择的选项从多个目录加载图像。如果我选择选项 1，它应该选择第一个目录并以 7 秒的间隔从该目录加载图像。如果我选择选项 2，它应该选择一个不同的目录并以 7 秒的间隔从该目录加载图像。我在 Javascript 中使用 setInterval 选项。当我选择选项 1 时，它可以正常工作并以 7 秒的时间间隔一张一张地加载图像，但是当我在下拉列表中选择选项 2 时，时间间隔会从 7 秒减少。我尝试通过遵循一些解决方案来使用 clearInterval ，但它对我不起作用。我还提到了How do I correctly use setInterval and clearInterval to switch between two different functions?。

下面是我的代码：

selectCity.addEventListener("change", () => {

    celeb.src = `${directory}/image1.png`;
    
    images = [];

    images[0] = `/${directory}/image1.png`;
    images[1] = `/${directory}/image2.png`;
    images[2] = `/${directory}/image3.png`;

    var setint = window.setInterval(changeImage, 7000);
    var x = 1;

    function changeImage() {
      celeb.src = images[x];
      console.log(images[x]);
      x++;
      if (images.length == x) {
        x = 0;
        window.clearInterval(setint);
        setint = window.setInterval(changeImage, 7000);
      }     
    }
}

一旦 selectCity 被更改，我想使用 clearInterval。我是 HTML 和 Javascript 的初学者。请提出我在这段代码中做错了什么。

【问题讨论】：

我认为你应该改用setTimeout()。看起来Interval不到7秒，但我认为它不止一个并行运行......
感谢您的回复！很抱歉，我的问题不清楚。我尝试了 setTimeout 并在加载第一张图像后停止。我已经更新了我的问题。你能帮忙吗？
哦 - 我刚刚注意到了！你没有关闭selectCity.addEventListener( 函数！ - 在代码的最后！
您没有使用select.selectedIndex 更改图像目录。另外，您使用的代码是什么 - images？
@iAmOren 我已经添加了图像代码。当我从下拉列表中选择一个选项时，我正在更改目录。问题是当我更改选项时，它会从不同的目录中正确选择图像，但我面临的问题是图像之间的时间跨度从新目录的 7 秒减少。

标签： javascript

【解决方案1】：

一般情况：

如果您需要持续调用函数，请使用 setInterval。
如果您想延迟函数的调用，请使用setTimeout。

在你的情况下。如果更改了selectCity，您希望延迟更改图片。因此请改用setTimeout。

示例：

let currentIndex = 0

selectCity.addEventListener('change', () => {
  setTimeout(() => {
    if (images.length < currentIndex) {
      celeb.src = images[currentIndex]
      currentIndex += 1
    }
  }, 7000)
})

在浏览器中测试setTimeout：

document.getElementsByTagName('button')[0].addEventListener('click', function() {
  setTimeout(() => console.log('Clicked'), 5000)
})

&lt;button&gt;Console after 5 seconds&lt;/button&gt;

【讨论】：

感谢您的回复！很抱歉，我的问题不清楚。我尝试了 setTimeout 并在加载第一张图像后停止。我已经更新了我的问题。你能帮忙吗？