使用jQuery UI滑块更改setInterval（）的值

我该怎么做？我有以下更改背景图像的代码：

var alt = false;
    var delay = 5000;
    var speed = ((delay / 3)*2);
    var opacity = 1;


    $( "#slider" ).slider({
        orientation: "vertical", 
        range: "true", 
        min: 500, 
        max: 10000, 
        value: delay,
        change: function( event, ui ) {
            delay = ui.value;
        }
    });

    setInterval(function() {
    var r=Math.floor(Math.random()*b.length);
    console.log(delay);
    switch(alt)
    {   case true:
            $('#bg1').css("background-image", "url('"+b[r]+"')");
            $('#bg1').fadeTo(speed,opacity);
            $('#bg2').fadeOut(speed);
        break;
        case false:
            $('#bg2').css("background-image", "url('"+b[r]+"')");
            $('#bg2').fadeTo(speed,opacity);
            $('#bg1').fadeOut(speed);
        break;
    }
    alt = !alt;
    }, delay);

更改滑块应该更改变量，但不会更改。我不知道如何更改名为

delay

的变量

编辑 现在我正在尝试，但它也不起作用，当我移动滑块时，它会改变一次：

var alt = false;
            var delay = 1000;
            var speed = ((delay / 3)*2);
            var opacity = 1;
            var h;


            function iSwap() {
                var r=Math.floor(Math.random()*b.length);
                console.log(delay);
                switch(alt)
                {   case true:
                        $('#bg1').css("background-image", "url('"+b[r]+"')");
                        $('#bg1').fadeTo(speed,opacity);
                        $('#bg2').fadeOut(speed);
                    break;
                    case false:
                        $('#bg2').css("background-image", "url('"+b[r]+"')");
                        $('#bg2').fadeTo(speed,opacity);
                        $('#bg1').fadeOut(speed);
                    break;
                }
                alt = !alt;
            }

            h = setInterval(iSwap(), delay);
            $( "#slider" ).slider({
                orientation: "vertical", 
                range: "true", 
                min: 500, 
                max: 10000, 
                value: delay,
                change: function( event, ui ) {
                    delay = ui.value;
                    clearInterval(h);
                    h = setInterval(iSwap(), delay);
                }
            }); 

试试这个：

$("#slider").slider({
  orientation: "vertical",
  range: "true",
  min: 500,
  max: 10000,
  value: delay,
  slide: function (event, ui) {
    $("#amount").val(ui.value);
    delay = ui.value
    console.log(delay);
  }
});

---

更改变量后，必须再次调用

setInterval（…）

，如下所示（截断）

---

理想情况下，为了减少冗余代码，您必须将其中的一部分放入命名函数中，并调用

您正在更改变量，而不是间隔：（那么我如何更改间隔？@Chud37您不能这样做。您必须使用

setTimeout（）

并在每次触发时重新设置计时器。

var handle;
/* -- snip -- */
change: function( event, ui ) {
   delay = ui.value;
   clearInterval(handle);
   handle = setInterval( /* -- snip -- */ , delay);
}
/* -- snip -- */
handle = setInterval( /* -- snip -- */ , delay)