打乱图片的JS代码会使网站停止响应

Question

我做了一个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);

Answer 1

我不知道为什么，但是当我在shuffle中声明randomproject和projectCheck变量时函数(父函数)它工作。有人知道原因吗?