Блог

Я пытаюсь настроить a .progressbar() и мигающий <span> элемент так, чтобы, когда .progressbar() загрузка завершится, оба исчезли. Вместо <span> этого элемент не перестает мигать, даже после того, как он исчезнет. Это просто продолжается. Я пробовал использовать логическую переменную и некоторые операторы if, но это не сработало.

Вот ссылка на то, что у меня есть на данный момент: http://jsfiddle.net/mnbishop017/XqH6B /

Я бы предложил несколько изменений, как показано в следующей скрипке: http://jsfiddle.net/Ws4Lz /

 $(document).ready(function () {
    var begin = $("#begin");
    var intervalHook, timeoutHook, val = 0;

    begin.progressbar({
        value: 0,
        max: 100
    });

    $("#begin,#loading").fadeIn(4000);

    intervalHook = setInterval(function () {
        $("#loading").fadeIn(1000, function () {
            $(this).delay(100).fadeOut(1000);
        });
    }, 2500);

    function progress() {
        val = begin.progressbar("value") || 0;
        begin.progressbar("value", val   1);
        if (val < 100) {
            timeoutHook = setTimeout(progress, 100);
        }
        if (val == 100) {
            clearTimeout(timeoutHook);
            clearInterval(intervalHook);
            $("#begin,#loading").fadeOut(4000);
        }
    }

    timeoutHook = setTimeout(progress, 3000);
});
 

1. используйте clearInterval и clearTimeout . Вы можете передать значения, возвращенные из setInterval и setTimeout , соответственно, остановить их запуск, как только ваше .progressbar() значение достигнет своего максимального значения.
2. Отделите fadeIn fadeOut функциональность / от progress функции. Таким образом, ваша fadeIn / fadeOut logic не будет затрагиваться при каждом progress() вызове.
3. Убедитесь, что интервал, указанный вами в setInterval вызове, позволяет завершить анимацию. Изначально у вас есть интервал 1000 мс, указанный для операций анимации, для завершения которых потребуется 4100 мс.

Он ведет себя так, потому что вы устанавливаете интервал, но не останавливаете его.

Попробуйте следующее:

Во-первых, поместите свой таймер в переменную, например:

 // (simply put var timer = before your excisting interval)
// key-word "var" is not necessary
var timer = setInterval(function(){ (...) 
 

Затем оцените каждый интервал, можно ли удалить таймер. Это может быть проще всего, если вы оцениваете значение в самом интервале. Псевдопример:

 if(foo == 100) {
    clearInterval(timer);
}
 

Это должно сработать. 🙂

• Вы также можете использовать опцию «завершить» функции progressbar. Это делает ваш код более чистым, поскольку вам не нужны ни счетчик, ни оператор if для проверки «если загрузка == true» или что-то еще.
• Я бы также установил 2 интервальные переменные, поскольку индикатор выполнения и эффект мигания не синхронизированы:

   $(document).ready(function(){
      var begin = $("#begin").fadeIn(4000);
      var loading = $("#loading").fadeIn(4000);
      begin.progressbar({
          value: 0,
          max: 100,
          complete: function(event, ui){
              begin.fadeOut(4000);
              loading.fadeOut(4000);
              clearInterval(barinterval);
              clearInterval(blinkinterval);
          }
      });
  
      var barinterval = setInterval(function(){
              begin.progressbar("value", begin.progressbar("value")   1);
              },100);
  
      var blinkinterval = setInterval(function(){
          loading.fadeIn(500, function(){
              $(this).delay(100).fadeOut(500);
              });
          },1500);
  });
   

http://jsfiddle.net/XqH6B/20/