Блог

Я создал код js, который перемешивает некоторые изображения проектов, и я сделал так, чтобы один и тот же проект не отображался одновременно более чем в одном окне ( у вас есть список изображений, которые вы хотите показать, но они должны появляться случайным образом, и как только одно из них будет показано, его нельзя будет повторить или показать снова, пока оно не исчезнет из первого окна, я думаю, что это лучшее объяснение). это работает, но проблема в том, что веб-сайт перестает работать через несколько секунд. в начале я объявил переменные randomproject и projectCheck в глобальной области. это не привело к сбою веб-сайта, но он показывал один и тот же проект во многих коробках одновременно. ( Я все еще новичок в js, поэтому код не очень хорош)

 <div class="project-viewer">
                <div id="project1"></div>
                <div id="project2"></div>
                <div id="project3"></div>
                <div id="project4"></div>
                <div id="project5"></div>
                <div id="project6"></div>
            </div>

 

 /*projects grid*/
var projects = [
    'images/project0.png',
    'images/project1.jpg',
    'images/project2.jpg',
    'images/project3.jpg',
    'images/project4.png',
    'images/project5.png',
    'images/project6.png',
    'images/project7.png',
    'images/project8.png',
    'images/project9.jpg',
    'images/project10.jpg',
    'images/project11.jpg'
],

    projectsCheck = [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false
    ],

    project1 = document.getElementById('project1'),
    project2 = document.getElementById('project2'),
    project3 = document.getElementById('project3'),
    project4 = document.getElementById('project4'),
    project5 = document.getElementById('project5'),
    project6 = document.getElementById('project6');


function shuffle(project, projectsCheck, projects, ms) {
    'use strict';

    setInterval(function () {

        var randomproject = 0,
            oldproject = 0;
        oldproject = randomproject;
        projectsCheck[randomproject] = false;

        while (projectsCheck[randomproject] == true || randomproject == oldproject) {
            randomproject = Math.floor(Math.random() * projects.length);
        }
        projectsCheck[randomproject] = true;
        project.style.backgroundImage = "url("   projects[randomproject]   ")";

    }
        , ms);
}

shuffle(project1, projectsCheck, projects, 11000);
shuffle(project2, projectsCheck, projects, 9000);
shuffle(project3, projectsCheck, projects, 12000);
shuffle(project4, projectsCheck, projects, 10000);
shuffle(project5, projectsCheck, projects, 8000);
shuffle(project6, projectsCheck, projects, 13000);
 

Я не знаю почему, но когда я объявил переменные randomproject и projectCheck в функции shuffle (родительской функции), это сработало. кто-нибудь знает причину?