輸入高時頁面會減慢瀏覽器的速度

Question

我正在為 odin 項目構建一個 etch-a-sketch 瀏覽器版本。 有一條提示消息詢問用戶輸入並根據輸入創建一個網格。

如果輸入是 15，那么應該給出一個 15x15 的網格。

不幸的是，輸入越高，頁面加載所需的時間就越多。 任何想法為什么？

 const container = document.querySelector('#container'); const btn = document.querySelector('#btn'); /* btn.addEventListener('click', () => { squares.forEach(square => { square.style.backgroundColor = 'white'; }); }); */ btn.addEventListener('click', () => addGrid()); function addGrid() { let content = document.createElement('div'); let input = prompt("Please enter the number of squares per side (2 - 100)"); while ((input == null || input > 100 || input < 2 || isNaN(input))) { input = prompt("Please enter the number of squares per side (2 - 100)"); } for (let i = 0; i <= input * input; i++) { container.style.cssText = 'grid-template-rows: repeat(' + input + ' , 1fr); grid-template-columns: repeat(' + input + ', 1fr)'; content = document.createElement('div'); content.classList.add('square'); container.appendChild(content); squares = container.querySelectorAll('.square') squares.forEach(square => { square.addEventListener('mouseenter', () => { square.style.backgroundColor = 'black'; }); }); squares.forEach(square => { square.addEventListener('mouseleave', () => { square.style.backgroundColor = 'black'; }); }); } return content; }

 <button id="btn">Click</button> <div id="container"></div>

Answer 1

您需要將事件處理程序移到循環之外。 您還需要在循環中使用 < 而不是 <=

更好的是，來自容器的委托

這是一個工作版本 - 您可以在 css 中使用 calc() 來調整各個方塊的大小

使用委托事件處理

 const container = document.getElementById('container'); const btn = document.getElementById('btn'); const reset = document.getElementById('reset'); const mclick = e => { const tgt = e.target; if (tgt.matches(".square")) tgt.classList.toggle("clicked"); } const mhover = e => { const tgt = e.target; if (!tgt.matches(".square")) return; // not a square tgt.classList.toggle("active",e.type==="mouseover") } const resetGrid = () => container.querySelectorAll(".square") .forEach(sq => { ["clicked","active"] .forEach(cls => sq.classList.remove(cls)) }); const addGrid = () => { let content = document.createElement('div'); let input = prompt("Please enter the number of squares per side (2 - 100)"); while ((input == null || input > 100 || input < 2 || isNaN(input))) { input = prompt("Please enter the number of squares per side (2 - 100)"); } for (let i = 0; i < input * input; i++) { container.style.cssText = 'grid-template-rows: repeat(' + input + ' , 1fr); grid-template-columns: repeat(' + input + ', 1fr)'; let content = document.createElement('div'); content.classList.add('square'); content.textContent = i container.appendChild(content); } }; btn.addEventListener('click',addGrid); container.addEventListener("mouseover",mhover); container.addEventListener("mouseout",mhover); container.addEventListener("click",mclick); reset.addEventListener("click",resetGrid);

 #container { display:grid; } div.square { height: 50px; width: 50px; border:1px solid black;} div.square.active { background-color: black;} div.square.clicked { background-color: red;}

 <button id="btn">Start</button><button id="reset">Reset</button> <div id="container"></div>