Question

请参阅代码。我无法从这个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>

Answer 1

您只需在函数内设置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足以完成这项工作。我也改变了程序，因此它不会自动启动或停止，而是通过按下按钮。图片将无限循环。

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

1 个答案: