spin.js не отображается во время длительной задачи, но делает это, когда я прохожу через отладчик

Question

Я использую spin.js во время длительной задачи обработки.

Когда я только запускаю задачу, изменения пользовательского интерфейса, которые я делаю непосредственно перед запуском задачи, не отображаются во время самой задачи. Однако, когда я вручную перехожу через процесс с помощью отладчика, пользовательский интерфейс обновляется, как ожидалось. Что дает? Я попытался запустить setTimeout в долгосрочной функции, чтобы обновить время пользовательского интерфейса; нет кубиков.

function updateGraphDisplay() { 
    var opts = { 
     lines: 13, // The number of lines to draw 
     length: 20, // The length of each line 
     width: 10, // The line thickness 
     radius: 30, // The radius of the inner circle 
     corners: 1, // Corner roundness (0..1) 
     rotate: 0, // The rotation offset 
     direction: 1, // 1: clockwise, -1: counterclockwise 
     color: '#000', // #rgb or #rrggbb or array of colors 
     speed: 1, // Rounds per second 
     trail: 60, // Afterglow percentage 
     shadow: false, // Whether to render a shadow 
     hwaccel: false, // Whether to use hardware acceleration 
     className: 'spinner', // The CSS class to assign to the spinner 
     zIndex: 2e9, // The z-index (defaults to 2000000000) 
     top: '50%', // Top position relative to parent 
     left: '50%' // Left position relative to parent 
    }; 

    var spinner = new Spinner(opts).spin(); 
    $('#chart').append(spinner.el); 

    // long running local computations (~4s) 

    Highcharts.charts[0].series[0].setData(sentimentDataPoints); 
    Highcharts.charts[0].series[1].setData(volumeDataPoints); 

    spinner.stop(); 
} 

Answer 1

Вы должны помнить, что JS однопоточный. Что происходит, когда вы используете setTimeout(fn, delay), так это то, что JS запускает функцию fn для запуска примерно delay миллисекунд в будущем, а затем продолжает выполнение строк, следующих за setTimeout().

Это означает, что ваша функция updateGraphDisplay() запустится до завершения, включая создание счетчика, а затем миллисекунды позже, удалив его. Следовательно, почему вы не видите его обновление.

Вместо того, что вам нужно сделать, это переместить все после того, как ваши «длинные бегущие локальные вычисления» в функции передается setTimeout() поэтому он будет выполнять после что код запуска в будущем.

Сокращенный код Пример структуры:

// initialisation code 
// create spinner and append to DOM 
setTimeout(function() { 
    // do calculations 
    // update graph 
    // clear spinner 
}, 0); // even a delay of 0 will work