从输入框单击时不更新 setTimeout() 值

Question

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

<input style="width:50px;" type="text" id="rrrr" value="2000">

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

But after HTML Render updating value

<input style="width:50px;" type="text" id="rrrr" value="2000">

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 <button id="speedbutton">Change Speed</button> (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;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="page-wrapper"> <div id="slider-wrapper"> <div id="slider"> <div class="sp" style="background: blue;">1</div> <div class="sp" style="background: yellow;">2</div> <div class="sp" style="background: green;" >3</div> <div class="sp" style="background: red;">4</div> </div> </div> <div id="nav"></div> <div id="button-previous">prev</div> <div id="button-next">next</div> </div> <br> <input style="width:50px;" type="text" id="rrrr" value="2000"> <button id="speedbutton">Change Speed</button>

Answer 1

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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <input style="width:50px;" type="text" id="rrrr" value="2000"> <button id="speedbutton">Change Speed</button><br> <div id="page-wrapper"> <div id="slider-wrapper"> <div id="slider"> <div class="sp" style="background: blue;">1</div> <div class="sp" style="background: gray;">2</div> <div class="sp" style="background: green;">3</div> <div class="sp" style="background: red;">4</div> </div> </div> <div id="nav"></div> <div id="button-previous">prev</div> <div id="button-next">next</div> </div> <br>