Анимированное изображение не движется во время длительного вызова метода javascript - PullRequest
Новая
       22

Анимированное изображение не движется во время длительного вызова метода javascript

5 голосов
/ 15 декабря 2010

Во время метода, который выполняется в течение 10 секунд для добавления некоторых элементов в html, анимированный gif вообще не перемещается, создавая ощущение, что веб-страница застряла.Любой способ обойти это.

Пример кода: 

    $('#button).click(function() {   
        showAnimatedGif();
        longRunningMethod();    
        hideAnimatedGif();
    });

Одним из способов решения этой проблемы является разбиение метода длительного запуска на несколько шагов и анимация таким образом, но тогда вам нужно написать свой кодтаким образом для каждого метода длительного запуска.

Хотите знать, есть ли другой способ сделать это?

Ответы [ 2 ]

6 голосов
/ 15 декабря 2010

Единственный способ убедиться, что анимация на самом деле происходит, - это чтобы longRunningMethod периодически передавался браузеру.Нередко поток рендеринга пользовательского интерфейса блокирует поток JavaScript, поэтому изменения, которые вы вносите в DOM, не отображаются до тех пор, пока в следующий раз не выйдет поток JavaScript.Вы можете выйти, вызвав setTimeout с таймаутом 0 (который будет больше 0 мс - очевидно - в большинстве реализаций браузера; многие ограничивают это значение по крайней мере до 4 мс и, возможно, до 10 мс).

Пример: вот скрипт, который добавляет 500 делений, но не дает браузеру никакой возможности показывать текущую работу или (обычно) анимировать что-либо: 

jQuery(function($) {

  $("#btnGo").click(function() {
    var n;

    display("Loading...");

    for (n = 0; n < 500; ++n) {
      $("<div/>").html("Div #" + n).appendTo(document.body);
    }

    display("Done loading");

    function display(msg) {
      $("<p/>").html(msg).appendTo(document.body);
    }
  });

});​

Живой пример * Пример с графикой счетчика

Как видите, он никогда не сдается, и поэтому, когда вы нажимаете кнопку, страница на мгновение останавливается, а затем появляются все 500 делений и сообщения.

Контраст с этим другим концом спектра, который дает между каждым делением : 

jQuery(function($) {

  $("#btnGo").click(function() {
    display("Loading...");

    addDivs(0, 500, function() {
      display("Done loading");
    });

    function addDivs(current, max, callback) {
      if (current < max) {
        $("<div/>").html("Div #" + current).appendTo(document.body);
        setTimeout(function() {
          addDivs(current + 1, max, callback);
        }, 0);
      }
      else {
        callback();
      }
    }

    function display(msg) {
      $("<p/>").html(msg).appendTo(document.body);
    }
  });

});​

Живой пример * Пример с вращателемgraphic

Так как это дает, вы можете видеть незавершенную работу.

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

0 голосов
/ 28 октября 2015

Если ваш длительный метод выполняет синхронный вызов ajax. Используйте асинхронную опцию в методе open. 

xmlHttp.open('POST', ajaxurl, true);

Это позволит вращаться вашей вращающейся графике.

...