передача {queue: false} в jQuery show () - PullRequest
Новая
       13

передача {queue: false} в jQuery show ()

0 голосов
/ 07 апреля 2019

В следующем коде showLoader является первым вызовом, но все равно loader не появляется, и причина в том, что heavyLifting блокирует поток пользовательского интерфейса. 

function onClick() {
  showLoader();
  console.log(heavyLifting());
  hideLoader();
}
function showLoader() {
  $('#loader').show();
}
function hideLoader() {
  $('#loader').hide();
}

function heavyLifting() {
  var num = 0;
  console.log('started heavyLifting');
  for (var i = 0; i < 100000000; ++i) { 
    num += Math.random(); 
  }
  console.log('finished heavyLifting');
  return num;
}
.hourglass-background {
    position: fixed;
    background: rgba(250,250,250,0.8);
    width: 100%;
    height: 100%;
    z-index: 99;
}
.hourglass {
    position: absolute;
    top: 40%;
    left: 48%;
    transform: translate(50%, -50%);
    z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loader" style="display: none">
    <span class="hourglass-background"></span>
    <span class="hourglass">&#8987</span>
</div>
<div>
  <button onclick="onClick()">click me</button>
</div>

Я хочу, чтобы loader появился сразу и подумал, что прохождение { queue: false } поможет, как говорят документы :

Если false, анимация начнется немедленно

, но она не работает: 

$('#loader').show({ queue: false }); // loader still won't appear immidiately

Почему?

1 Ответ

0 голосов
/ 11 апреля 2019

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

function showLoader() {
  console.log("Show");
  $('#loader').show();
}

function hideLoader() {
  console.log("Hide");
  $('#loader').hide();
}

function heavyLifting() {
  var num = 0;
  console.log('started heavyLifting');
  for (var i = 0; i < 100000000; ++i) {
    num += Math.random();
  }
  console.log('finished heavyLifting');
  return num;
}

var start = Date.now();

function log(str) {
  var dt = Date.now() - start;
  // Log Number of Milliseconds since start and a String to console
  console.log(dt + ": " + str);
}

$(function() {
  log("Page Loaded");
  $(".start.btn").click(function() {
    log("Start Click Event");
    log("Show Loader");
    showLoader();
    log("Start Heavy Lift");
    var lift = heavyLifting();
    log("End Heavy Lift");
    setTimeout(function() {
      log("Hide Loader");
      hideLoader()
    }, 1000);
    console.log(lift);
    log("End Click Event");
  });
});
.hourglass-background {
  position: fixed;
  background: rgba(250, 250, 250, 0.8);
  width: 100%;
  height: 100%;
  z-index: 99;
}

.hourglass {
  position: absolute;
  top: 40%;
  left: 48%;
  transform: translate(50%, -50%);
  z-index: 100;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loader" style="display: none;">
  <span class="hourglass-background"></span>
  <span class="hourglass">&#8987</span>
</div>
<div>
  <button class="btn start">click me</button>
</div>

Обновление

очередь (по умолчанию: true)

Логическое значение, указывающее, помещать ли анимацию в очередь эффектов.Если false, анимация начнется немедленно.Начиная с jQuery 1.7, опция очереди также может принимать строку, и в этом случае анимация добавляется в очередь, представленную этой строкой.Когда используется произвольное имя очереди, анимация не запускается автоматически;Вы должны позвонить .dequeue("queuename"), чтобы запустить его.

Надеюсь, это поможет.

...