jQuery: .text и .html не срабатывают вовремя

Запускаю код:

function bubbleSort(array) {
  let len = array.length;
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < len; i++) {
      if (array[i] > array[i + 1]) {
        let tmp = array[i];
        array[i] = array[i + 1];
        array[i + 1] = tmp;
        swapped = true;
      }
    }
  } while (swapped);
};
let array=[];
for (let index = 0; index < 11000; index++) {
   array[index] = Math.floor(Math.random() * (100000));
   let sign = Math.floor(Math.random() * 2);
   if (sign === 1) array[index] *= -1;
}
let arrayToSort = array.slice();
ell = document.getElementById('p');
ell.innerHTML = "Started";

setTimeout(bubbleSort(array), 3000);

ell = document.getElementById('p');
ell.innerHTML = "Finished";
  
<p id="p"></p>

Но текст изменяется только после выполнения функции bubblesort (сначала started, потом моментально на finished)

Почему текст не меняется до функции? Там проходит примерно несколько секунд. Пробовал пихать в setTimeout, но без результата. Понимаю что особенности языка, но не знаю как исправить.


Ответы (1 шт):

Автор решения: Igor

function bubbleSort(array) {
  let len = array.length;
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < len; i++) {
      if (array[i] > array[i + 1]) {
        let tmp = array[i];
        array[i] = array[i + 1];
        array[i + 1] = tmp;
        swapped = true;
      }
    }
  } while (swapped);
};

let array=[];
for (let index = 0; index < 33000; index++) {
  array[index] = Math.floor(Math.random() * (100000));
  let sign = Math.floor(Math.random() * 2);
  if (sign === 1) array[index] *= -1;
}
let arrayToSort = array.slice();

let ell = document.getElementById('p');
ell.innerHTML = "Started";
setTimeout(function(arr) {
  bubbleSort(arr);
  ell.innerHTML = "Finished";
}, 0, arrayToSort);
<p id="p"></p>

→ Ссылка