javascript - 如何在 setInterval() 中停止递归。 Javascript-6ren

javascript - 如何在 setInterval() 中停止递归。 Javascript

转载作者：行者123 更新时间：2023-11-30 14:53:25

26

4

<!DOCTYPE html>
<html>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>

<h2 class="w3-center">Slideshow test</h2>

<div class="w3-content w3-section" style="max-width:500px">
  <img class="mySlides" src="1.jpg" style="width:100%">
  <img class="mySlides" src="2.jpg" style="width:100%">
  <img class="mySlides" src="3.jpg" style="width:100%">
  <img class="mySlides" src="4.jpg" style="width:100%">
</div>

<p id="demo"><p>

<script>
var Index = 0;
var x = document.getElementsByClassName("mySlides");

(Index <4) ? setInterval(slide,500):display(Index-1);


function slide() {
    var i;  
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
     Index++;
    document.getElementById('demo').innerHTML = Index-1;
    x[Index-1].style.display = "block";    
}

function display(n) {
  x[n].style.display = "block";
}
</script>

</body>
</html>

我想通过 setInterval() 显示一系列图像。最后，应该显示最后一张图像。问题是运行后没有图像。我确定变量 'Index' 仍然保持增加 1。我不知道为什么....

最佳答案

您的代码需要clearInterval 方法来停止interval。出于演示目的，我已将您的 images 替换为 divs。

var index = 0;
var x = document.getElementsByClassName("mySlides");

function displayNextSlide() {
  for (var i = 0; i < x.length; i++) {
    if (i === index) {
      x[i].style.display = "block";
    } else {
      x[i].style.display = "none";
    }
  }
  index++;
  if (index == x.length) {
    clearInterval(interval);
  }
}
displayNextSlide();
var interval = setInterval(displayNextSlide, 500)

<!DOCTYPE html>
<html>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
  .mySlides {
    display: none;
  }
</style>

<body>

  <h2 class="w3-center">Slideshow test</h2>

  <div class="w3-content w3-section" style="max-width:500px">
    <div class="mySlides" src="1.jpg" style="width:100%">1</div>
    <div class="mySlides" src="2.jpg" style="width:100%">2</div>
    <div class="mySlides" src="3.jpg" style="width:100%">3</div>
    <div class="mySlides" src="4.jpg" style="width:100%">4</div>
  </div>

关于javascript - 如何在 setInterval() 中停止递归。 Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47776729/

26

4

0

文章推荐：计算子进程fork()的进程运行时间

文章推荐： c# - SIgnalR:如何在连接时向客户端发送异常？

文章推荐： c - 如何使用 jansson 从 json 数组中提取无键值

文章推荐： c# - 多态性和依赖注入(inject)

javascript - setInterval 覆盖其他 setIntervals
这个问题已经有答案了: JavaScript closure inside loops – simple practical example (45 个回答) 已关闭 8 年前。我试图创建多个 se
setinterval - 如何用 requestAnimationFrame 替换 setInterval
这是我的情况，我需要加快函数运行时间，所以 setInterval 不是一个明智的选择，对吧？因为每次至少要花费 4 毫秒。所以，我可以将 setInterval 函数更改为 requestAnim
javascript setInterval - 如何多次调用并保留 setInterval Id？
我正在尝试下面的代码，看看是否可以将 setInterval Id 存储为关联数组中唯一键的值，然后通过使用唯一值作为键来停止被调用函数中的间隔，如下所示我将 setInterval Id 作为它的值
javascript - setInterval 在另一个 setInterval 中随着时间的推移而加速
我花了很长时间试图弄清楚如何使用具有 CSS 样式缓动功能的 Google Maps API 为折线上的符号设置动画。我让它工作 with this Gist和 this Google Maps AP
javascript - 倒数计时器，setInterval 内的 setInterval？
我是这里的 JS 新手，正在研究一个在给定时间段后开始的倒数计时器。基本上，当用户单击按钮时时钟开始，第二个时钟在第一个计时器用完时开始。我知道“setInterval”是完成这个的最好方法。我面临的
jquery - 使用 setInterval 到另一个 Setinterval
嗨， friend 们，我想只使用一个 setInterval 函数来运行我的代码。目前我正在使用两个 setInterval's 来实现我的目标，我们可以只使用一个 'setInterval' 来获
jQuery setInterval/悬停 : it works once, 但随后停止 setInterval
我的“setInterval”函数有问题，我想在将鼠标悬停在 div 上时启动该函数，但是 setInterval 在我将鼠标悬停在 div 上时第一次起作用=>如果我停留在div，它不会继续改变图片
javascript - 为什么我的第一个 setInterval 停止而第二个 setInterval 继续运行？
我想展示两次:一次在你的国家，一次在日本用JS 问题是第二个 setInterval 停止了第一个，我不知道如何进行两次运行。完整代码 In your region:
javascript - 哪种方式更好，setInterval() 或 window.setInterval()？
好吧，这个问题有几个问题。首先，我要求 setTimeout() 和 setInterval() 我见过几种不同的调用方式，我想知道哪种方式最适合这种情况。我正在制作一个 js/canvas 游戏
javascript - 在 1 秒内重定向 setinterval javascript 或根据条件停止 setinterval
setInterval(function () { //======= //code //======== if(--timer&etype="; } },1000); 这里定时器结束后，而不是重定
javascript - 为了性能更好，两个函数在同一个 setInterval() 中还是两个不同的 setInterval 中？ - JavaScript
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 5 年前。 Improv
javascript - setInterval(func) 和 setInterval(function(){func()}) 有什么区别
我的前老板有一个 weird bug where when he used setInterval with a long delay interval : setInterval(func, 300
javascript - ES6 setInterval(() => foo(), 1000 与 setInterval(foo, 1000)
这个问题已经有答案了: How does the "this" keyword work, and when should it be used? (22 个回答) How to access the
javascript - setInterval ("/*some code*/", time) 和 setInterval(function() {/*一些代码*/}, time)
我的印象是 setInterval("/*some code*/", time) 相当于 setInterval(function() { /*some code*/ }, time) 显然不是
javascript - NodeJS 中的事件，在 setInterval 内发出事件，但在没有 setInterval 时则不会发出事件
我对 JavaScript 和 NodeJS 非常陌生，我只是想了解 NodeJS 中的发射器模式。当我尝试使用 setInterval 函数每秒发出一个刻度事件时，程序似乎工作正常:-
javascript - 在 java 脚本中的 setTimeout 方法内调用 setInterval 函数获取 setInterval(...) 不是函数错误
我有一个简单的 setTimeout 函数，它在特定时间运行并且工作正常: var now = new Date(); var milliTillExec = new Date(now.getFull
Javascript setInterval()
在本教程中，您将借助示例了解 JavaScript setInterval() 方法。在 JavaScript 中，可以在指定的时间间隔内执行一段代码。这些时间间隔称为定时事件。有
PHP的无限循环或jQuery setInterval？
Js: function cometConnect(){ $.ajax({ cache:false, type:"post", d
javascript检查元素是否可见并相应地设置 "setInterval"
LE2。关于如何解决此问题的任何其他想法？我有这段代码，但不知道为什么不能正常工作: $(function autorun() { if ($("#contactForm").is(":visibl
一段时间内的Javascript setinterval
这个问题在这里已经有了答案: How to make a setInterval stop after some time or after a number of actions? (6 个答案)

首页

博学

6Ren·AI

商城

javascript - 如何在 setInterval() 中停止递归。 Javascript