javascript - 如何使用 jQuery UI 范围 slider 更改变量的值

Question

假设我已经设置了间隔

setInterval(function() {
    console.log("Hi");
}, 1000);

想象一下，我使用该随机函数设置了 setInterval，它将在每次调用时生成随机数。

setInterval(function() {
        console.log("Hi");
    }, 1000 + Math.random() * 4000);

它将在 1 到 4 秒之间调用 setInterval

现在我想要的就是使用这种 slider 来更改整数的值: https://jsfiddle.net/qetwstkb/

我想通过使用 slider 来操纵这些值。 :)抱歉，我的母语不是英语，无法更好地解释。 >_<

Answer 1

要获取选定的范围值，您可以使用:

var min = $("#slider").slider("values")[0];
var max = $("#slider").slider("values")[1];

要在值更改时执行回调函数，请使用 slide 选项。

获得这些值后，您可以将这些值放在任何地方，包括 setInterval 函数。

$(document).ready(function() {

$(function(){

  var update = function() {
    var min = $("#slider").slider("values")[0];
    var max = $("#slider").slider("values")[1];
    
     var i = setInterval(function() {
        console.log("Hi");
    }, min + Math.random() * max);
    
    return i;
  }
  
  var i;
  
  $("#slider").slider({
    values: [1000, 1750],
    min: 500,
    max: 3900,
    step: 0.1,
    slide: function (e, ui) {
      clearInterval(i);
      i = update();
    }
    
  });
  
});

});

<link href="https://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="slider"></div>