Javascript switch 语句无法正常工作找不到解决方案

Question

我正在开发一个新项目，但在使用这段 javascript 时遇到了一些问题。我不知道哪里出了问题，希望你能帮助我。

我希望我的代码做的是将 var i 计数为 4，当它达到 4 时将 i 设置为 0 并重新开始。问题是 switch 语句只执行 case 0 eventhough i 设置为 1。我尝试将所有内容切换为字符串，但似乎没有帮助。

function bckLoad() {
  var i = 0;

  switch (i) {
    case 0:
      i = 1;
      var leftPos = $('#index-header').scrollLeft();
      $("#index-header").animate({
        scrollLeft: leftPos + 1940
      }, 800);
      window.alert("Test");
      break;
    case 1:
      i = 2;
      var leftPos = $('#index-header').scrollLeft();
      $("#index-header").animate({
        scrollLeft: leftPos + 1940
      }, 800);
      window.alert("test1");
      break;
    case 2:
      i = 3;
      var leftPos = $('#index-header').scrollLeft();
      $("#index-header").animate({
        scrollLeft: leftPos + 1940
      }, 800);
      window.alert("test2");
      break;
    case 3:
      i = 4;
      var leftPos = $('#index-header').scrollLeft();
      $("#index-header").animate({
        scrollLeft: leftPos + 1940
      }, 800);
      window.alert("test3");
      break;
    case 4:
      i = 0;
      var leftPos = $('#index-header').scrollLeft();
      $("#index-header").animate({
        scrollLeft: leftPos - 7760
      }, 800);
      window.alert("test4");
      break;
    default:
      break;
  }
}
var intervalID = window.setInterval(bckLoad, 6000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="index-header">
  <ul>
    <li>
      <a href="#">
        <h1>Home</h1>
      </a>
    </li>
    <li>
      <a href="#">
        <h1>Blog</h1>
      </a>
    </li>
    <li>
      <a href="#">
        <h1>About</h1>
      </a>
    </li>
    <li>
      <a href="#">
        <h1>Contact</h1>
      </a>
    </li>
  </ul>
</div>

Answer 1

移动

 var i = 0;

在函数之外。否则每次都会重置。

我会怎么做:

  const leftBy = [1940, 1940, 1940, -7760];
  let i = 0;

  function animate() {
    const leftPos = $('#index-header').scrollLeft();
    $("#index-header").animate({scrollLeft: leftPos + leftBy[i]}, 800);                       
    window.alert(`Test${i}`);
    i = (i + 1) % 5;
  }

  setInterval(animate, 6000);