Question

我有一个脚本，该脚本应每5秒运行一次函数，具体取决于先前运行的函数，但是似乎每秒钟都会跳过一次。

let i = 0;
function testOne()
{
    $("#two").fadeOut().css("display","none");
    $("#three").fadeOut().css("display","none");
    $("#four").fadeOut().css("display","none");
    $("#five").fadeOut().css("display","none");
    $("#one").fadeIn().css("display","block");
    $("#iOne").addClass("btn-active");
    $("#iTwo").removeClass("btn-active");
    $("#iThree").removeClass("btn-active");
    $("#iFour").removeClass("btn-active");
    $("#iFive").removeClass("btn-active");
    i++;
}
function testTwo() {
    $("#one").fadeOut().css("display","none");
    $("#three").fadeOut().css("display","none");
    $("#four").fadeOut().css("display","none");
    $("#five").fadeOut().css("display","none");
    $("#two").fadeIn().css("display","block");
    $("#iTwo").addClass("btn-active");
    $("#iOne").removeClass("btn-active");
    $("#iThree").removeClass("btn-active");
    $("#iFour").removeClass("btn-active");
    $("#iFive").removeClass("btn-active");
    i++;
}
function testThree() {
    $("#one").fadeOut().css("display","none");
    $("#two").fadeOut().css("display","none");
    $("#four").fadeOut().css("display","none");
    $("#five").fadeOut().css("display","none");
    $("#three").fadeIn().css("display","block");
    $("#iThree").addClass("btn-active");
    $("#iTwo").removeClass("btn-active");
    $("#iOne").removeClass("btn-active");
    $("#iFour").removeClass("btn-active");
    $("#iFive").removeClass("btn-active");
    i++;
}
function testFour() {
    $("#one").fadeOut().css("display","none");
    $("#two").fadeOut().css("display","none");
    $("#three").fadeOut().css("display","none");
    $("#five").fadeOut().css("display","none");
    $("#four").fadeIn().css("display","block");
    $("#iFour").addClass("btn-active");
    $("#iTwo").removeClass("btn-active");
    $("#iThree").removeClass("btn-active");
    $("#iOne").removeClass("btn-active");
    $("#iFive").removeClass("btn-active");
    i++;
}
function testFive() {
    $("#one").fadeOut().css("display","none");
    $("#two").fadeOut().css("display","none");
    $("#three").fadeOut().css("display","none");
    $("#four").fadeOut().css("display","none");
    $("#five").fadeIn().css("display","block");
    $("#iFive").addClass("btn-active");
    $("#iTwo").removeClass("btn-active");
    $("#iThree").removeClass("btn-active");
    $("#iFour").removeClass("btn-active");
    $("#iOne").removeClass("btn-active");
    i = 0;
}
window.setInterval(function()
    {

        if(i === 0) {
            testOne();
            i++;
        } else if (i === 1) {
            testTwo();
            i++;
        } else if (i === 2) {
            testThree();
            i++;
        } else if (i === 3) {
            testFour();
            i++;
        } else if (i === 4) {
            testFive();
            let i = 0;
        }

    }, 5000);

函数显示在“ let i = 0”之后，但是我选择不放置它们，因为它们太长了。他们所做的只是在i ++之前运行一些jQuery代码。或者让我= 0;在第五项功能上。

您知道为什么会是这个问题吗？

完整JS代码-https://hastebin.com/icalefafoy.js

Ben J

Answer 1

您将i递增两次，一次是在间隔代码中，一次是在函数本身中：

 function testOne() {
   //...
   i++
 }

 //...
 testOne();
 i++

别这么做。

Answer 2

您要在间隔的每次迭代中将变量i递增两次，一次在您调用的函数中，一次在interval函数本身中，这就是它跳过的原因。从其他功能中删除i++。

let i = 0;
function testOne()
{
 console.log("one");

}
function testTwo() {
 console.log("two");

}
function testThree() {
 console.log("three");

}
function testFour() {
 console.log("four");
}
function testFive() {
 console.log("five");
}
window.setInterval(function()
    {

        if(i === 0) {
            testOne();
            i++;
        } else if (i === 1) {
            testTwo();
            i++;
        } else if (i === 2) {
            testThree();
            i++;
        } else if (i === 3) {
            testFour();
            i++;
        } else if (i === 4) {
            testFive();
            let i = 0;
        }

    }, 5000);

JavaScript功能跳过

2 个答案: