时间戳

首页 > 解决方案 > JavaScript 函数跳过

javascript - JavaScript 函数跳过

问题描述

我有一个脚本应该每 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);

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

你知道为什么这可能是问题吗？

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

标签： javascriptjquery

解决方案

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

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

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

只是不要那样做。

推荐阅读