使jQuery-ui滑塊自動滑動日期值

Question

我有一個帶有日期值的jQuery-UI滑塊。 我想要的是添加一個具有自動播放功能的按鈕。 會使滑桿自動移動1天並在滑桿到達終點時停止的操作。

這是HTML

<input type="text" id="date-slider-1" size="100">
<button id="slider-1-autoplay">Autoplay</button>
<p></p>
<div id="slider-range"></div>

這是jQuery代碼

$("#slider-range").slider({
  min: new Date('2019.05.01').getTime() / 1000,
  max: new Date('2019.07.31').getTime() / 1000,
  step: 86400,
  value: new Date('2019.05.27').getTime() / 1000,
  slide: function(event, ui) {
    $("#date-slider-1").val(new Date(ui.value * 1000).toDateString());
  }
});
$("#date-slider-1").val(new Date($("#slider-range").slider("value") * 1000).toDateString());


var slider1Autoplay = false;
var minDate = new Date('2019.05.01').getTime() / 1000;
var maxDate = new Date('2019.07.31').getTime() / 1000;

$("#slider-1-autoplay").on("click", function() {

  slider1Autoplay = (slider1Autoplay) ? false : true;
  while (slider1Autoplay) {
    var curDate = new Date(jQuery("#date-slider-1").val());
    var nextDate = new Date(curDate.setDate(curDate.getDate() + 1));

    slider1Autoplay = (nextDate.getTime() / 1000 > maxDate) ? false : true;

    setTimeout(function() {
      jQuery("#date-slider-1").val(new Date(nextDate).toDateString());
      jQuery("#slider-range").val(new Date(nextDate).toDateString());
    }, 1000);
  }

})

問題是，每當我單擊“自動播放”時，瀏覽器就會凍結，我需要關閉並打開它。 通過調試，我看到curDate變量始終相同。 沒有更新。

您可以在這里查看代碼https://jsfiddle.net/brsn1ohm/7/

Answer 1

考慮以下。

示例： https ： //jsfiddle.net/Twisty/2g957zwa/64/

的JavaScript

$(function() {
  var format = "yy.mm.dd";
  var minDate = "2019.05.01";
  var maxDate = "2019.07.31";

  function formatDate(str) {
    var yy = str.slice(0, 4);
    var mm = str.slice(5, 7);
    var dd = str.slice(8);
    var f = yy + "-" + mm + "-" + dd;
    console.log("Format:", f);
    return f;
  }

  function strToDate(f, str) {
    return $.datepicker.parseDate(f, str);
  }

  function dateToStr(f, dt) {
    return $.datepicker.formatDate(f, dt);
  }

  function calcDayDiff(a, b) {
    var d1 = Date.parse(formatDate(a)),
      d2 = Date.parse(formatDate(b)),
      tdf = Math.abs(d2 - d1),
      ddf = Math.ceil(tdf / (1000 * 3600 * 24));
    console.log("Calc:", a, b, d1, d2, tdf, ddf);
    return ddf;
  }

  function addDays(dt, d) {
    var nt = d * (1000 * 3600 * 24);
    var ndt = new Date(dt.getTime() + nt);
    console.log("Add:", dt, d, nt, ndt);
    return ndt;
  }

  function dateToSeconds(dStr) {
    var dt = new Date(dStr);
    return dt.getTime() / 1000;
  }

  $("#slider-range").slider({
    min: 0,
    max: calcDayDiff(minDate, maxDate),
    step: 1,
    value: calcDayDiff(minDate, "2019.05.27"),
    slide: function(event, ui) {
      var dtv = addDays(strToDate(format, minDate), ui.value);
      $("#date-slider-1").val(dateToStr(format, dtv));
    }
  });

  var sdtv = addDays(strToDate(format, "2019.05.01"), $("#slider-range").slider("value"));
  $("#date-slider-1").val(dateToStr(format, sdtv));

  var slider1Autoplay = false;
  var intv;

  console.log("Init: ", slider1Autoplay, $("#slider-range").slider("value"));

  $("#slider-1-autoplay").on("click", function() {
    slider1Autoplay = (slider1Autoplay) ? false : true;
    if (slider1Autoplay == false) {
      clearInterval(intv);
    }
    intv = setInterval(function() {
      var cv = $("#slider-range").slider("value");
      var sdtv = addDays(strToDate(format, minDate), ++cv);
      $("#slider-range").slider("value", cv);
      $("#date-slider-1").val(dateToStr(format, sdtv));
    }, 1000);
  });
});

希望能有所幫助。