将{queue：false}传递给jQuery show（）

Question

在下面的代码中，showLoader是第一个调用，但仍然没有出现loader，原因是heavyLifting阻止了UI线程。

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>

我希望qazxsw poi立即出现，并认为通过qazxsw poi会有所帮助，因为loader：

如果为false，则动画将立即开始

但它不起作用：

{ queue: false }

为什么？

Answer 1

我怀疑执行发生的速度太快，而且根本看不到足够长的时间。如果添加延迟，您可以看到它正在运行。

docs say

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

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");
  });
});

更新

队列（默认值：true）

一个布尔值，指示是否将动画放置在效果队列中。如果为false，则动画将立即开始。从jQuery 1.7开始，queue选项也可以接受一个字符串，在这种情况下，动画会被添加到该字符串所代表的队列中。使用自定义队列名称时，动画不会自动启动;你必须打电话给

.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;
}

才能启动它。

希望有所帮助。