Not Updating setTimeout() value on click from input box

Question

Here is a JS slider, that is changing slides in every 2 second from value of

but first time when HTML Render the slider takes value properly.

But after HTML Render updating value

is doesn't changing slider speed.

i tried this but it not working..

var iHandle = 0;
$(document).ready(function() {
    //
    // read initial value:
    //
    var delay = document.getElementById("rrrr").value;
    //
    // set initial interval:
    //
    iHandle = window.setInterval(function() {
       // console.log(delay);
        function next() 
    }, delay);
    //
    // change delay by user trigger (pressing on button):
    //
    $("#speedbutton").on("click", function () {
        //
        // clear previous setInterval() object if existent:
        //
        if(iHandle) {
          clearInterval(iHandle);           
        }
        //
        // read new value:
        //
        var delay = document.getElementById("rrrr").value;
        //
        // set new interval:
        //
        iHandle = window.setInterval(function() {
          console.log(delay);
          function next() 
         }, delay);
    });
});

My aim is to change slider speed after changing input box value and click on (Such as: 1000, 3000, 5000)

My Slider Whole Code is:

        $(document).ready(function () {
    $('.sp').first().addClass('active');
    $('.sp').hide();
    $('.active').show();
    var t = 0;
var delay = document.getElementById("rrrr").value;
    function next() {
        clearTimeout(t);
        if (document.visibilityState === 'visible') {
            $('.active').removeClass('active').addClass('oldActive');
            if ($('.oldActive').is(':last-child')) {
                $('.sp').first().addClass('active');
            } else {
                $('.oldActive').next().addClass('active');
            }
            $('.oldActive').removeClass('oldActive');
            $('.sp').fadeOut();
            $('.active').fadeIn();
        }
        t = setTimeout(next, delay)
    }

    function prev() {
        clearTimeout(t);
        if (document.visibilityState === 'visible') {
            $('.active').removeClass('active').addClass('oldActive');
            if ($('.oldActive').is(':first-child')) {
                $('.sp').last().addClass('active');
            } else {
                $('.oldActive').prev().addClass('active');
            }
            $('.oldActive').removeClass('oldActive');
            $('.sp').fadeOut();
            $('.active').fadeIn();
        }
        t = setTimeout(next, delay)
    }
    $('#button-next').click(next);
    $('#button-previous').click(prev);

    t = setTimeout(next, delay)
});

        body{font-size:12px; font-family: 'Verdana';}
#page-wrapper{margin: 0 auto;position: relative;width: 500px;}
#slider-wrapper {width:300px; height:200px;}
#slider {width:300px; height:200px; position:relative;}
.sp {width:300px; height:200px; position:absolute; font-size:20px; color:#fff;}

#nav {margin-top:20px; width:50%;}
#button-previous {float:left; cursor:pointer;}
#button-next {margin-left: 250px !important;cursor:pointer;}

user_2932476 · Answer

Simply put a click listener to your button, that get the new value of input , and change the global delay var like :

$("#speedbutton").on("click", function(e) {
    let newDelay = $("#rrrr").val();
    
     if (!isNaN(newDelay)) {
          delay = newDelay;
     }
  
})

See below wokring snippet :

$(document).ready(function() {
  $('.sp').first().addClass('active');
  $('.sp').hide();
  $('.active').show();
  var t = 0;
  var delay = document.getElementById("rrrr").value;

  function next() {
    clearTimeout(t);
    if (document.visibilityState === 'visible') {
      $('.active').removeClass('active').addClass('oldActive');
      if ($('.oldActive').is(':last-child')) {
        $('.sp').first().addClass('active');
      } else {
        $('.oldActive').next().addClass('active');
      }
      $('.oldActive').removeClass('oldActive');
      $('.sp').fadeOut();
      $('.active').fadeIn();
    }
    t = setTimeout(next, delay)
  }

  function prev() {
    clearTimeout(t);
    if (document.visibilityState === 'visible') {
      $('.active').removeClass('active').addClass('oldActive');
      if ($('.oldActive').is(':first-child')) {
        $('.sp').last().addClass('active');
      } else {
        $('.oldActive').prev().addClass('active');
      }
      $('.oldActive').removeClass('oldActive');
      $('.sp').fadeOut();
      $('.active').fadeIn();
    }
    t = setTimeout(next, delay)
  }
  $('#button-next').click(next);
  $('#button-previous').click(prev);

  t = setTimeout(next, delay)
  
  $("#speedbutton").on("click", function(e) {
    let newDelay = $("#rrrr").val();
    
     if (!isNaN(delay)) {
      delay = newDelay;
     }
  
  })
  
});

body {
  font-size: 12px;
  font-family: 'Verdana';
}

#page-wrapper {
  margin: 0 auto;
  position: relative;
  width: 500px;
}

#slider-wrapper {
  width: 300px;
  height: 200px;
}

#slider {
  width: 300px;
  height: 200px;
  position: relative;
}

.sp {
  width: 300px;
  height: 200px;
  position: absolute;
  font-size: 20px;
  color: #fff;
}

#nav {
  margin-top: 20px;
  width: 50%;
}

#button-previous {
  float: left;
  cursor: pointer;
}

#button-next {
  margin-left: 250px !important;
  cursor: pointer;
}

Not Updating setTimeout() value on click from input box

1 Answers