Question

我正在开发一个新项目，但是JavaScript有点问题。我不知道出什么问题了，希望您能帮助我。

我希望我的代码能做到的是将var i计数为4，当它达到4时，将i设置为0并重新开始。问题是即使我设置为1，switch语句也只执行情况0，我试图将所有内容都切换为字符串，但似乎无济于事。

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);

Answer 2

每次调用函数时，您都要将i设置为0，因此它不会记住不同调用之间的值。您需要将变量移到函数外部。

也不需要switch()语句，因为除了i的新值之外，每种情况下您都执行相同的操作。但是，该值只是添加1并环绕。

var i = 0;

function bckLoad() {
    i = (i + 1) % 5;
    var leftPos = $('#index-header').scrollLeft();
    $("#index-header").animate({
        scrollLeft: leftPos + (i > 0 ? 1940 : -7760)
    }, 800);
}

Answer 3

仔细查看函数声明后的第一行：

            var i = 0;

该行在您每次调用window.setInterval(bckLoad, 6000);时都在运行，因为正在调用bckLoad函数，因此它将在每次运行时将i的值赋值为0。您必须从函数中获取变量表示，例如：

var i = 0;
function bckLoad(){

        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);

干杯！

Answer 4

  var i = 0; // moved outside , it's logical :)

  function bckLoad() {

//处理冗余代码

  switch (i) {
    case 0:
    case 1:
    case 2:
    case 3:
    case 4:
      i = (i+1)%5;// resetting to 0 once it reaches to 4
      var leftPos = $('#index-header').scrollLeft();

      $("#index-header").animate({
        scrollLeft: leftPos + (i==0?-7760:1940)
      }, 800);

      window.alert("test"+(i==0?"":i));

      break;
      default :
      break;
  }
}

var intervalID = window.setInterval(bckLoad, 6000);

JavaScript switch语句无法正常工作，无法找到解决方案

4 个答案: