以編程方式為JQuery滑塊設定影片

我正在嘗試以編程方式更改/影片 JQuery 滑塊。在此示例中，有兩個陣列：一個用于要更改的值，另一個用于更改之間的持續時間。如果您查看控制臺，您將看到值隨著相應的持續時間而變化。但是，滑塊在達到最終值之前不會移動。我也在嘗試更新sliderValuespan 元素。同樣，它僅隨最后一個值而變化。有關演示，請參閱 JSFiddle 示例（控制臺日志）。滑塊應該從 100 開始，并使用持續時間陣列滑動到 105。

let valueArray = [101, 102, 103, 104, 105]
let durationArray = [800, 600, 550, 700, 300]
$("#sliderValue").html(100)
$("#slider").slider({
  value: 100,
  min: 0,
  max: 200,
  step: 1,
  slide: function(event, ui) {
    $("#sliderValue").html(ui.value);
  }
});

function pausecomp(millis, value) {
  var date = new Date();
  var curDate = null;
  do {
    curDate = new Date();
  }
  while (curDate - date < millis);
  console.log(value)
  $('#sliderValue').html(value)
  $("#slider").slider("option", "value", value);
}

function startSlider() {
  $("#sliderValue").html(100);
  $("#slider").slider("option", "value", 100);
  for (var i = 0; i < valueArray.length; i  ) {
    pausecomp(durationArray[i], valueArray[i]);
  }
}

HTML：

  <h1>Setting Slider Programmatically</h1>
  <div id="slider"></div>
  <p>Slider Value<span id="sliderValue"></span></p>
  <input type="button" value="Start Slider Animation" onclick="startSlider()">

Jsfiddle 示例

uj5u.com熱心網友回復：

do..while 回圈在“等待”時不斷運行，將 CPU（一個核心）利用到 100%。jQuery 顯然在內部使用了異步邏輯，但是 while 回圈不允許JS 事件回圈觸發它，只有在它完成之后才能觸發它。

所以你也必須使用異步邏輯。例如，使用經典的 setTimeout 到更現代的 async/await 使用一點“睡眠”輔助函式。

let valueArray = [101, 102, 103, 104, 105]
let durationArray = [800, 600, 550, 700, 300]
$("#sliderValue").html(100)
$("#slider").slider({
  value: 100,
  min: 0,
  max: 200,
  step: 1,
  slide: function(event, ui) {
    $("#sliderValue").html(ui.value);
  }
});

waitUntil = 0;

function pausecomp(millis, value) {
  setTimeout(function() {
    console.log(value)
    $('#sliderValue').html(value)
    $("#slider").slider("option", "value", value);
  }, waitUntil  = millis)
}

function startSlider() {
  console.clear()
  $("#sliderValue").html(100);
  $("#slider").slider("option", "value", 100);
  waitUntil = 0;
  for (var i = 0; i < valueArray.length; i  ) {
    pausecomp(durationArray[i], valueArray[i]);
  }
}

function sleep(millis) {
  console.log('Sleep '   millis)
  return new Promise(resolve => setTimeout(resolve, millis));
}

async function pausecompAsync(millis, value) {
  await sleep(millis);
  console.log(value)
  $('#sliderValue').html(value)
  $("#slider").slider("option", "value", value);
}

async function startSliderAsync() {
  console.clear()
  $("#sliderValue").html(100);
  $("#slider").slider("option", "value", 100);
  for (var i = 0; i < valueArray.length; i  ) {
    await pausecompAsync(durationArray[i], valueArray[i]);
  }
  console.clear()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" />

<div id="slider"></div>

<p>Slider Value<span id="sliderValue"></span></p>

<input type="button" value="Start Slider Animation" onclick="startSlider()">
<input type="button" value="Start Slider Animation using async/await/Promise" onclick="startSliderAsync()">

標籤：javascript jQuery 动画片 jquery-ui-滑块

上一篇：Javascript：顯示下一個div的按鈕onclick

下一篇：如何提交表單如何在不重新加載表單提交頁面的情況下獲取會話計數