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

Question

我正在做一个新项目，但对这个javascript有一些问题。我不知道出了什么问题，希望你能帮助我。

我希望我的代码段做的是将 var i 计数为 4，当它达到 4 时将 i 设置为 0 并重新开始。问题是 switch 语句只执行情况 0，即使 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);

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