gpt4 book ai didi

javascript - 如何从递归函数中获取变量的值

转载 作者:行者123 更新时间:2023-12-03 02:39:21 24 4
gpt4 key购买 nike

请查看代码。我无法从此 displayNextSlide() 函数获取变量的值。我想要另一个变量来获取递归停止后索引的值。我希望 tempIndex 在递归后具有索引值。

var index = 0;
let tempIndex = 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);
console.log(index);
<!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 class="mySlides" src="5.jpg" style="width:100%">5</div>
<div class="mySlides" src="6.jpg" style="width:100%">6</div>
<div class="mySlides" src="7.jpg" style="width:100%">7</div>
<div class="mySlides" src="8.jpg" style="width:100%">8</div>
<div class="mySlides" src="9.jpg" style="width:100%">9</div>
<div class="mySlides" src="10.jpg" style="width:100%">10</div>
</div>

最佳答案

您可以简单地在函数内设置 tempIndex 的值,tempIndex 变量将更新为新值,您可以使用另一个 setInterval 检查该值 例如:

// these variables are global
var tempIndex = 0;
var stopTheSlideshow = true;
var currentInterval;

// function to start and stop the setInterval
function startStop()
{
if(stopTheSlideshow)
{
stopTheSlideshow = false;
currentInterval = setInterval(displayNextSlide, 500);
}
else stopTheSlideshow = true;
}


function displayNextSlide()
{
var x = document.getElementsByClassName("mySlides");

if(stopTheSlideshow)
{
clearInterval(currentInterval);
console.log('tempIndex is now ' + tempIndex);
}
// go in circles
if(tempIndex == x.length) tempIndex = 0;

for (var i = 0; i < x.length; i++)
{
if (i == tempIndex)
{
x[i].style.display = "block";
}
else
{
x[i].style.display = "none";
}
}
tempIndex++;

// I changed this so the program will not stop automatically
if (tempIndex == x.length)
{
tempIndex = 0;
}
}

// this will print immidiately
console.log('This is the initial value for tempIndex ' + tempIndex);
.mySlides
{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<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">
</head>
<body>

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

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

<input type="button" value="click to start/stop" onclick="startStop()" />
</body>
</html>

编辑:我删除了变量index,因为不需要它,tempIndex足以完成这项工作。我还更改了程序,使其不会自动启动或停止,而是通过按按钮来启动或停止。图片将无限循环。

关于javascript - 如何从递归函数中获取变量的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48394808/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com