好吧，我對 JS 比較陌生，但在 python 和 java 方面有豐富的經驗。我的代碼有兩個問題需要幫助。首先這是我的代碼的解釋和背景。理想情況下，我想要最簡單的結構化視覺排序程序，我可以將其用作我的編碼進程的基礎以供參考。我首先最大化一個容器 div，它用于填充 x 數量的 div .bars，div 的寬度和位置在插入時由 Flexbox 自動處理。每個添加的 div 的高度是隨機生成的，并存儲在每個單獨的元素屬性中。我已經完成了所有這些，很簡單。然后我創(chuàng)建了一個元素交換器函數，可以交換 DOM 中的元素位置，效果非常好。現在回答我的問題。我希望看到元素在 for 循環(huán)迭代時實時排序，但直到循環(huán)結束它們才會更新。我找不到任何錯誤的插入算法也無法正常工作，但我不認為我的工作方法是錯誤的。任何幫助將不勝感激。對于其他人來說應該非常容易弄清楚。const sortDisplay = document.getElementById('sortDisplay');let resetbtn = document.querySelector('.reset');resetbtn.addEventListener('click', reset);let count = 0;let amount = 100;// create div that has custom attribute value, unique style tag, default bar style and append.function generateBar() { // generate div let bar = document.createElement('div'); // keep track of the total amount of bars count++; // assign random number 0-100 and setAttribute to the div let temp = Math.floor(Math.random() * 101); // create custom attribute that holds its value bar.setAttribute('value', temp); // create unique style tag with height as a percentage based on Attribute let barHeight = document.createElement('style'); barHeight.innerHTML = `.barHeight${count} {height: ${temp}%;}`; // add that unique style to the DOM sortDisplay.appendChild(barHeight); // now add that unique style to the div bar.classList.add(`barHeight${count}`); // use standard style from css as well bar.classList.add('sortBar'); // now add that div to the DOM sortDisplay.appendChild(bar);}// clear container div and regeneratefunction reset() { // clear all data within the container sortDisplay.innerHTML = ''; // reset the count count = 0; // generate k bars for (let i = 0; i < amount; i++) { generateBar(); }}
1 回答
GCT1015
TA貢獻1827條經驗 獲得超4個贊
這個錯誤非常?。耗诒容^字符串，而不是排序中的數字。添加數字轉換：
if (+document.querySelectorAll('.sortBar')[j].getAttribute('value') < +document.querySelectorAll('.sortBar')[j-1].getAttribute('value')) {
作為字符串，例如"3" > "29".
可視化不是“實時可見”，因為代碼完成得非?？欤乙矝]有釋放控制并等待 DOM 重新渲染。強制 DOM 重新渲染存在一些小問題，但我認為這在這里并不重要。
要解決此問題，請在循環(huán)中添加延遲，這非常簡單，您所需要的只是一個規(guī)范的延遲函數 ( const delay = ms => new Promise(res => setTimeout(res, ms));)，在( )async前面，以及交換之間的適當延遲 ( ，目前為 25 毫秒。確切的時間是不能保證，由于多種因素，例如一次可能需要 22 毫秒，下次需要 27 毫秒，但這并不是太重要）。sortasync function sortawait delay(DELAY_BETWEEN_SWAPS);
然而，這會導致取消問題：現在可以在排序仍在進行的情況下進行重置（異步性的困境）。因此，需要檢查當前的排序是否被取消。因此，每個排序過程都需要一個取消令牌，當按下重置時，可以使用該取消令牌來停止舊的排序。最后但最重要的是，開始新的排序（只需按“按鈕”），也會自動取消最后的排序。
請注意，我展示的是一些概念，但不一定是能夠贏得美容獎的代碼。我也不會改變任何“有效但我不會那樣做”的東西——例如，我更喜歡畫布而不是用大量的 DOM 更新來做動畫。
工作版本：
const sortDisplay = document.getElementById('sortDisplay');
let resetbtn = document.querySelector('.reset');
resetbtn.addEventListener('click', reset);
const DELAY_BETWEEN_SWAPS = 25;
const delay = ms => new Promise(res => setTimeout(res, ms));
let cancelLast = () => {};
let count = 0;
let amount = 100;
// create div that has custom attribute value, unique style tag, default bar style and append.
function generateBar() {
// generate div
let bar = document.createElement('div');
// keep track of the total amount of bars
count++;
// assign random number 0-100 and setAttribute to the div
let temp = Math.floor(Math.random() * 101);
// create custom attribute that holds its value
bar.setAttribute('value', temp);
// create unique style tag with height as a percentage based on Attribute
let barHeight = document.createElement('style');
barHeight.innerHTML = `.barHeight${count} {height: ${temp}%;}`;
// add that unique style to the DOM
sortDisplay.appendChild(barHeight);
// now add that unique style to the div
bar.classList.add(`barHeight${count}`);
// use standard style from css as well
bar.classList.add('sortBar');
// now add that div to the DOM
sortDisplay.appendChild(bar);
}
// clear container div and regenerate
function reset() {
cancelLast();
// clear all data within the container
sortDisplay.innerHTML = '';
// reset the count
count = 0;
// generate k bars
for (let i = 0; i < amount; i++) {
generateBar();
}
}
// when page is loaded reset
reset(amount);
// swap elements within the DOM
function swapElements(obj1, obj2) {
// create marker element and insert it above where obj1 is
var temp = document.createElement("div");
obj1.parentNode.insertBefore(temp, obj1);
// move obj1 to right before obj2
obj2.parentNode.insertBefore(obj1, obj2);
// move obj2 to right before where obj1 used to be
temp.parentNode.insertBefore(obj2, temp);
// remove temporary marker node
temp.parentNode.removeChild(temp);
}
// sort the divs within the DOM
async function sort(cancellationChecker) {
for (let i = 1; i < amount; i++) {
let j = i;
for (j; j > 0; j--) {
if (cancellationChecker()) return;
if (+document.querySelectorAll('.sortBar')[j].getAttribute('value') < +document.querySelectorAll('.sortBar')[j-1].getAttribute('value')) {
swapElements(document.querySelectorAll('.sortBar')[j], document.querySelectorAll('.sortBar')[j-1]);
await delay(DELAY_BETWEEN_SWAPS);
}
else {
break;
}
}
}
}
function btnSort() {
let cancelled = false;
cancelLast();
cancelLast = () => cancelled = true;
sort(() => cancelled);
}
// Button to run the sort function
button = document.querySelector('.button');
button.addEventListener('click', btnSort);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
}
.sortDisplay {
background-color: #305c50;
background-image: linear-gradient(28deg, #305c50 0%, #6ab19e 70%, #82d8a6 100%);
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 100%;
width: 100%;
overflow: hidden;
}
.btn-container {
position: absolute;
right: 0;
bottom: 0;
margin: 25px;
}
.btn-container button {
padding: 25px;
}
.sortBar {
flex: 1;
background-color: #0007;
}
<div class="btn-container">
<button class="reset">reset</button>
<button class="button">button</button>
</div>
<div id="sortDisplay"class="sortDisplay"></div>
- 1 回答
- 0 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消