Написал две JavaScript функции, но одна из них, кажется, сбивает мой сайт

Question

Итак, я написал простую программу, которая должна изменить фон данного сайта через 3 секунды.

Теперь это мой JavaScript код:

//this function changes the backgrounds after 3 seconds and increments n
function changebackgroundTimed(startvariable)
{
    var n = startvariable;
    var loop = 1; 

    while (loop == 1)
    {
        setTimeout(function(){changebackground(n)}, 3000)
        n++;
        if (n == 5)
        {
            n=1;
        }
    }



}

//this function changes the background depending on the given number
function changebackground(number)
{
    if (number == 1)
    {
        $("body").css("background","no-repeat center/120%url('../images/1.jpg')");
    }

    else if (number == 2)
    {
        $("body").css("background","no-repeat center/120%url('../images/2.jpg')");
    }

    else if (number == 3)
    {
        $("body").css("background","no-repeat center/120%url('../images/3.jpg')");
    }
    else if (number == 4)
    {
        $("body").css("background","no-repeat center/120%url('../images/4.jpg')");
    }

    else {
        $("body").css("background","no-repeat center/120%url('../images/1.jpg')");
        }



}

в html Я просто вызываю его с помощью: changebackgroundTimed (2);

Проблема: Когда Я запускаю страницу, на которой она долго загружается, а затем, в конце концов, вылетает, ничего не показывая. Он должен что-то делать с этими двумя функциями. Кто-нибудь из вас замечает ошибку, которую я могу пропустить?

Answer 1

Похоже, вы не обновляете переменную "l oop", которая вызывает ее go в бесконечном l oop.

Вместо использования while l oop, используйте Метод setInterval (). Это должно сработать за вас.

Оставьте переменную n вне функции и назовите ее, используя ключевое слово посторонних.

       function abc(){   

       var self = this;
       self.n = 1;

       setInterval(function () {   
            if(self.n ===1){
            self.n = self.n + 1;
            // your code
            }else if(){
            // and so on
            }     
           changebackground(self.n);
       },3000);
      }

Answer 2

мои 2 цента ...
CSS:

:root {
  --bg-images :"../images/1.jpg|../images/2.jpg|../images/3.jpg|../images/4.jpg|../images/5.jpg";
  --img-bg    :url(../images/1.jpg);
}
body {
  background-image: var(--img-bg); 
  background-position: center/120%;
  background-repeat: no-repeat;
}

Javascript:

const Root     = document.documentElement
    , gRoot    = getComputedStyle(Root)
    , imgList  = gRoot.getPropertyValue('--bg-images').match(/"(.*?)"/)[1].split('|')
    , NbImgs   = imgList.length
    , regExp = /\(([^)]+)\)/  // to get img url between parentheses
    ;
let currImg = imgList.findIndex(img=>img=== (regExp.exec(gRoot.getPropertyValue('--img-bg'))[1]))
    ;   
setInterval(() => {
  currImg = ++currImg % NbImgs;
  Root.style.setProperty('--img-bg', `url(${imgList[currImg]})`)
}, 3000)

Answer 3

setTimeout - это неблокирующий вызов. Это означает, что ваш код не будет ждать 3000 мс и продолжать работать в бесконечном l oop при вызове changebackground(n);.

Подробнее о setTimeout go здесь setTimeout из MDN

Используйте следующий код:

function changebackgroundTimed(startvariable)
{
	var n = startvariable;
	setInterval(() => {
			changebackground(n);
			n = (n % 5) + 1;
		}, 3000);
}


//this function changes the background depending on the given number
function changebackground(number)
{
 console.log(number)
}

changebackgroundTimed(2)

Answer 4

var i = 1;
setInterval(() => {
    if(i > 5){
        i = 0;
    }else{
        changeBackground(i)
    }
    i++;
}, 250);
function changeBackground(i){
    switch(i){
        case 1 :
            $("body").css("color", "red")
        break;
        case 2 :
            $("body").css("color", "blue")
        break;
        case 3 :
            $("body").css("color", "green")
        break;
        case 4 :
            $("body").css("color", "black")
        break;
        case 5 :
            $("body").css("color", "orange")
        break;
        default:
            $("body").css("color", "white")
    }
}

Answer 5

Вы создаете бесконечное число l oop и никогда не выходите из него, поэтому оно будет работать как можно быстрее и заблокировать пользовательский интерфейс.

Почему бы не использовать setInterval следующим образом:

const backgroundChanger = setInterval(changeBackground, 3000)


let background = 1

function changeBackground() {
  if (background >= 5) background = 1

  // set background however you like
  document.body.style.background = 'url(../images/' + background++ + '.jpg) center/120% no-repeat'
}

Answer 6

Возможно изменение темы, но без жесткого ограничения оригинальных функций

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Background image cycling</title>
        <style>
            body{
                width:100%;
                height:100vh;
                padding:0;
                margin:0;
            }
        </style>
        <script>

            /* configuration */
            const PAUSE=3;
            const SLIDES=['//www.stevensegallery.com/800/600','//www.placecage.com/800/600','//placebear.com/640/360','//picsum.photos/800/600'];

            (function( delay ){
                document.addEventListener('DOMContentLoaded',()=>{
                    var images=[/* default images */
                        '//placekitten.com/900/800',
                        '//placekitten.com/1000/800',
                        '//placekitten.com/1024/768',
                        '//placekitten.com/1200/800',
                        '//placekitten.com/1366/768'
                    ];
                    if( arguments[1] )images=images.concat( arguments[1] )
                    var i=0;
                    (function(){
                        setTimeout( arguments.callee, 1000 * delay );
                        i++;
                        if( i > images.length - 1 )i=0;
                        document.body.style.background='center / contain no-repeat url('+images[ i ]+')';
                    })();
                });
            })( PAUSE, SLIDES );
        </script>
    </head>
    <body>
        <!-- content -->
    </body>
</html>

Answer 7

Похоже, что вы никогда не выйдете из while l oop, что делает страницу cra sh, поскольку она работает вечно. В какой-то части вашего кода вы должны изменить значение переменной loop.