Как зацикливать / запускать функцию каждые 5 секунд, пока страница не откроется, но не работает, используя функцию setInterval в js

Question

Полный код наконец-то!

Я работаю над проектом, в котором у меня есть герой с цитатой, но я хочу, чтобы через каждые 5 секунд только текст цитаты, имя автора и изображение изменения в затухании или любой анимации!

Я пробовал на for loop, interval, но это не сработало, пожалуйста, помогите мне

Я хочу:

l oop для отображения слайдов через функцию getSlide (начальный_статус), если current_timing == slideshow_timing и установлен current_timing = 0; и l oop следует делать через каждую секунду

Полный код: -

index. js

// Js file for index page
postcss([ require('postcss-vh-to-px') ])

//declaration of elements in a variable
var nav = document.getElementById("nav");
var menu = document.getElementById("menu");
var navbar = document.getElementById("navbar");
var account = document.getElementById("account");
var account_bar = document.getElementById("account-bar");



//var to describe the navbar status
var nav_status = null;

function menuOpt(){
    if(nav_status == true){
        document.getElementById("navbar-close").style.transform="translateY(-200%)";
        document.getElementById("navbar-close").id="navbar";
        nav_status = null;
    }
    else{
        document.getElementById("navbar").style.transform="translateY(0%)";
        document.getElementById("navbar").id="navbar-close";
        nav_status = true;
        if(acc_status == true){
            document.getElementById("account-bar-close").style.transform="translateX(200%)";
            document.getElementById("account-bar-close").id="account-bar";
            acc_status = null;
        }
    }
}


//var to describe the accountbar status
var acc_status = null;

function accountOpt(){
    if(acc_status == true){
        document.getElementById("account-bar-close").style.transform="translateX(200%)";
        document.getElementById("account-bar-close").id="account-bar";
        acc_status = null;
    }
    else{
        document.getElementById("account-bar").style.transform="translateX(0%)";
        document.getElementById("account-bar").id="account-bar-close";
        acc_status = true;
        if(nav_status == true){
            document.getElementById("navbar-close").style.transform="translateY(-200%)";
            document.getElementById("navbar-close").id="navbar";
            nav_status = null;
        }

    }
}

Answer 1

Если я правильно понимаю вашу проблему, ваша функция выполняется с регулярным интервалом, но после 5 итераций current_timing становится равным 5000, а затем условие if выполнено, и после этого ничего не меняется.

Я изменил вашу функцию немного, если current_timing больше или равен slideshow_timing, сбросить current_timing на ноль. И вы можете поместить getSlide (начальный_статус) в условие else (вам придется обрабатывать переменную начальный_статус также в функции setCurrentTime ()).

function setCurrentTime(){
    if(current_timing >= slideshow_timing){
        console.log("Overlap");
        current_timing = 0 ;
    }
    else{
        current_timing = current_timing + 1000 ;
        console.log("Cu " + current_timing);
    }
} 

Надеюсь, я правильно понял вашу проблему и надеюсь, что она help

Редактировать: После проверки вашего полного кода я обнаружил две проблемы: 1. Файл jquery должен быть включен перед файлом bootstrap js 2. Переменная initial_Status проверяется только один раз в блоке if. необходимо проверить в функции setCurrentTime ()

Вот новая функция:

function setCurrentTime(){
    if(current_timing == slideshow_timing){
        console.log("Overlap");
        current_timing = 0 ;
    }else{
        current_timing = current_timing + 1000 ;
        console.log("Cu " + current_timing);
    }
    if(starting_Status == 3){
        starting_Status = 1;
    }else{
        starting_Status = starting_Status + 1;
    }
    getSlide(starting_Status);
}

Это можно сделать лучше, но это зависит от реализации и вашей логики c.

Дайте мне знать, если я что-то пропустил:)