Покажите прогресс выполнения JavaScript
У меня есть некоторые функции JavaScript, которые занимают приблизительно 1 - 3 секунды. (некоторые циклы или mooML, обрабатывающий код по шаблону.)
В это время браузер просто замораживается. Я пытался показать "загружающуюся" анимацию (gif изображение) прежде, чем запустить операцию и скрыть его послесловия. но это просто не работает. Замораживания браузера, прежде чем это могло представить изображение и скрывает его сразу, когда функция заканчивается.
Есть ли что-либо, что я могу сделать, чтобы сказать браузеру обновлять экран перед входом в выполнение JavaScript., Что-то как Приложение. DoEvents или фоновые рабочие потоки.
Так любые комментарии/предложения о том, как показать прогресс выполнения JavaScript. Мой основной целевой браузер является IE6, но должен также работать над всеми последними браузерами
4 ответа
Это связано с тем, что все в IE6 выполняется в одном потоке - даже анимация gif.
Единственный способ убедиться, что гифка отображается перед запуском, - это отсоединить выполнение.
function longRunningProcess(){
....
hideGif();
}
displayGif();
window.setTimeout(longRunningProcess, 0);
Но это все равно приведет к зависанию браузера во время выполнения longRunningProcess .
Чтобы обеспечить взаимодействие, вам придется разбить код на более мелкие фрагменты, например, например,
var process = {
steps: [
function(){
// step 1
// display gif
},
function(){
// step 2
},
function(){
// step 3
},
function(){
// step 4
// hide gif
}
],
index: 0,
nextStep: function(){
this.steps[this.index++]();
if (this.index != this.steps.length) {
var me = this;
window.setTimeout(function(){
me.nextStep();
}, 0);
}
}
};
process.nextStep();
Чтобы показать прогресс долго выполняющейся функции, нужно использовать немного более сложную технику.
Допустим, у вас есть такая функция, которая выполняется достаточно долго:
function longLoop() {
for (var i = 0; i < 100; i++) {
// Here the actual "long" code
}
}
Чтобы сохранить отзывчивость интерфейса и показать прогресс (также чтобы избежать сообщений "script is taking too long..." в некоторых браузерах), вы должны разделить выполнение на несколько частей.
function longLoop() {
// We get the loopStart variable from the _function_ instance.
// arguments.callee - a reference to function longLoop in this scope
var loopStart = arguments.callee.start || 0;
// Then we're not doing the whole loop, but only 10% of it
// note that we're not starting from 0, but from the point where we finished last
for (var i = loopStart; i < loopStart + 10; i++) {
// Here the actual "long" code
}
// Next time we'll start from the next index
var next = arguments.callee.start = loopStart + 10;
if (next < 100) {
updateProgress(next); // Draw progress bar, whatever.
setTimeout(arguments.callee, 10);
}
}
Я не тестировал этот реальный код, но я использовал эту технику раньше.
Возможно, вы можете установить задержку между показом анимированного gif и запуском тяжелого кода.
Покажите гифку и позвоните:
window.setTimeout(myFunction, 100)
Сделайте тяжелые вещи в "myFunction".
Попробуйте установить курсор ожидания перед запуском функции, а затем удалите его. В jQuery это можно сделать следующим образом:
var body = $('body');
body.css("cursor", "wait");
lengthyProcess();
body.css("cursor", "");