如何使用 jquery/javascript 正确更新 setInterval？

Question

所以我有一个 div 在屏幕上淡入和淡出，发生这种情况的速率由用作旋钮的输入值给出（通过使用 knob.js).我希望用户能够动态更改旋钮上的值，然后为 setInterval 设置新的速率。但是，这并没有发生，无论 dial/knob 上的更改如何，它都会继续停留在默认值。如果有人能指出我做错了什么，或以任何方式提供帮助，我将不胜感激。

  $(function (){
      $(".dial").knob();
      $("#reknob").val().trigger("change");
  });

  function fadeRed() {
      $("#rediv").fadeOut();
      $("#rediv").fadeIn();
  }

  function getRed() {
      refreq=$("#reknob").val();
      return refreq;
  }

 setInterval(function () {
      fadeRed();
      },getRed());

Answer 1

您需要使用更改处理程序来重置间隔

$(function() {
  var reknobInterval;
  $("#reknob").knob({
    change: function(v) {
      reset(+v)
    }
  });
  reset(+$("#reknob").val())

  function reset(value) {
    $("#rediv").stop(true, true).show();
    clearInterval(reknobInterval);
    reknobInterval = setInterval(fadeRed, value * 1000); //convert the delay to seconds
  }

  function fadeRed() {
    $("#rediv").fadeOut().fadeIn();
  }
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://anthonyterrien.com/js/jquery.knob.js"></script>

<input id="reknob" class="dial" data-width="150" data-cursor=true data-thickness=.3 data-fgColor="#222222" data-min="1" data-max="10" />
<div id="rediv">rediv</div>

如何使用 jquery/javascript 正确更新 setInterval？

How do I correctly update setInterval using jquery/javascript?

javascript

jquery

jquery-plugins

setinterval