Не давно начал учить js и столкнулся с такой проблемой.
Нужно визуализировать сортировку пузырьком.
Но в функции BubbleSort перерисовка массива происходит только после выполнения сортировки, а не во время её исполнения.
Подскажите в чем ошибка и как её исправить.
Набросал следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Сортировка</title>
<script src="js/jquery.js"></script>
<script src="js/sort.js"></script>
</head>
<body>
<div id="wrap">
<input type="text" id="min">
<input type="text" id="max">
<input type="text" id="n">
<p class="button Generate">Сгенерировать числа</p>
<p class="button randomGenerate">Сгенерировать числа рандомно</p>
<ol class='content'>
</ol>
</div>
</body>
</html>
function delay(ms) {
// Задаем точки начала измерения
var before = after = new Date();
before = before.getTime();
after = after.getTime();
// В цикле меняем вторую точку, сравнивая разницу с аргуметом
while (after < before + ms) {
after = new Date();
after = after.getTime();
}
}
function BubbleSort(A){ // отсортировать по возрастанию.
var n = A.length;
for (var i = 0; i < n-1; i++){
for (var j = 0; j < n-1-i; j++){
if (A[j+1] < A[j]){
var t = A[j+1];
A[j+1] = A[j];
A[j] = t;
UpdatingPoint(A,'ol.content');//Перерисовка массива
console.log('Меняем местами :'+A[j+1]+' и '+A[j]);
delay(1000);
}
}
}
return A; // На выходе сортированный по возрастанию массив A.
}
function Rand( min, max,n) {
var A=[];
for (var i = 0; i < n; i++) {
if( max ) {
A.push(Math.floor(Math.random() * (max - min + 1)) + min);
} else {
A.push(Math.floor(Math.random() * (min + 1)));
}
}
return A;
}
function GetImp(idImp){
return Number(document.getElementById(idImp).value);
}
$(function(){
x1=0;x2=0;
$('.Generate').click(function(){
min=GetImp('min');
max=GetImp('max');
n=GetImp('n');
a=Rand(min, max,n);
UpdatingPoint(a,'ol.content')
});
$('.randomGenerate').click(function(){
a=Rand(-100, 100,10);
UpdatingPoint(a,'ol.content')
});
});
function SetPoints(A,place){//Отрисовка массива
for (var i = 0; i < A.length; i++) {
$(place).append("<li id='p"+i+"'>"+A[i]+"</li>");
}
}
function DelPoints(place){//Удаление массива
$(place).empty();
}
function UpdatingPoint(A){
DelPoints('ol.content');
SetPoints(A,'ol.content');
}