Как отобразить spin.js перед выполнением некоторой функции?

Question

Я хочу отобразить счетчик перед некоторой сложной функцией, т. Е. DummyCounter(). Код выглядит следующим образом:

function add1() { 
    msg.html('start counting~<br \>'); 
    document.body.appendChild(div); 
    spinner.spin(div); 
    // display spinner before doing stuff 

    dummyCounter(); 
} 

jsfiddle: http://jsfiddle.net/eGB5t/

Однако вертушка показывает после того, как функция dummyCounter() завершена.

Я пытаюсь использовать обратный вызов, чтобы принудительно отображать показания счетчика, но все равно ничего хорошего. Может ли кто-нибудь помочь? Благодарю.

jsfiddle: http://jsfiddle.net/eGB5t/2/

Answer 1

У вас есть провал мышления. Спиннеры обычно используются для асинхронных задач, поэтому вы можете видеть, что что-то происходит. Затем обратный вызов используется для удаления спина, когда действие async завершено, так как вы не можете сказать, прежде чем он запустится, когда он закончит.

Я составил быстрый пример, чтобы показать вам, как такая функция async будет работать в этом случае, и вы можете четко видеть, как прядильщик появляется немного до появления «google finished». http://jsfiddle.net/eGB5t/4/

Я добавил следующее вместо своего метода подсчета:

$.ajax("http://google.de").always(function() { 
    msg.append("google finished"); 
}); 

Вы добавляете спина, прежде чем рассчитывать, то он считает, то вы можете удалить вертушку. Это прекрасно. Дело в том, что если вы считаете, что 9999999999999 (так что это займет несколько секунд), нормальный цикл, как вы делаете, полностью блокирует браузер, поэтому у вас не будет никаких рецензий (и, следовательно, нет счетчика) на все, пока цикл запущен.

Что вам нужно будет сделать (в данном случае) - представить работника, имеющего multithreading functionality in javascript.

Answer 2

var x; 
function add1() { 
    msg.html('start counting~<br \>'); 

spinner.spin(div); 
x= setTimeout(document.body.appendChild(div),500); 
}