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

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

Your "whole" code doesn't include a handler for the button to change the delay and the delay doesn't get updated on next/prev (which I assuming is because you want to hold off on changing delay until the button is clicked) — fdomn-m
– fdomn-m, Commented Feb 4, 2021 at 12:04
Change your "read new value" from var delay = inside the click handler to delay = so that it changes the global variable and not create a new one in the click handler jsfiddle.net/p10Lqfke Voted close as typo. — fdomn-m
– fdomn-m, Commented Feb 4, 2021 at 12:10

Bourbia Brahim · Accepted Answer · 2021-02-04 12:08:08Z

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>

Collectives™ on Stack Overflow

Not Updating setTimeout() value on click from input box

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related