用jQuery UI Slider改變setInterval（）的值

我該怎麼做？我有以下的代碼，改變背景圖像：用jQuery UI Slider改變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); 
       } 
      });

來源

2013-01-25 Chud37

你正在改變的變量，而不是*週期* – dualed

:(如何那麼我需要改變時間間隔嗎？ – Chud37

@ Chud37你不能那樣做。你必須使用'setTimeout（）'並在每次觸發時重新設置定時器。 – Pointy

試試這個：

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

A DEMO HERE

來源

2013-01-25 14:36:51

你必須再次調用setInterval(...)，改變你的變量之後，像這樣（trun cated）

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

理想的情況下，以減少冗餘代碼，你將不得不把這一某些部分在名爲功能和調用

來源

2013-01-25 14:37:18 dualed

用jQuery UI Slider改變setInterval（）的值

回答

相關問題