在Javascript中更新setInterval函数的毫秒参数

Question

I have a slider that is displaying quotes. Some quotes are longer than others and I'd like to provide the user adequate time to read them. The timer variable is getting updated in the changeQuote function, but its not updating the paramater of the setInterval function. How can I update the milliseconds parameter of the setInterval? Thanks

var quotes=[{quote:'lorem ipsum', name:'test'},{quote:'lorem ipsum ipsum 2', name:'test2'}];

var x=0;
var l = quotes.length;
var ql=0;
var timer=0;

function quoteInit(){
    if(x==l) x=0;
    ql = quotes[x]['quote'].length;
    $('.quote').find('h4').html(quotes[x]['quote']);
    $('.quote').find('p').html(quotes[x]['name']);
    timer=(ql*110);
    x++;
    changeQuote(timer); 
}

function changeQuote(timer){
    console.log(timer);
    setInterval(quoteInit,timer);
}

quoteInit();

Answer 1

Adding to my comment, use something like this to stop and start your timer again:

function start() {
    theTimer = setInterval(quoteInit,timer);
};

function stop() {
    clearInterval(theTimer);
};

Simply call stop() and start() when you want to reset the timer with a different interval (after changing timer ofcourse). This will stop the timer (with your old timer value) and start it again with the new value.

Answer 2

As everybody said, just changing setInterval to setTimeout works fine:

 var quotes=[{quote:'short', name:'test'}, {quote:'medium ipsum', name:'test2'},{quote:'long lorem ipsum ipsum', name:'test3'}]; var x=0; var l = quotes.length; var ql=0; var timer=0; function quoteInit(){ if(x==l) x=0; ql = quotes[x]['quote'].length; $('.quote').find('h4').html(quotes[x]['quote']); $('.quote').find('p').html(quotes[x]['name']); timer=(ql*110); x++; changeQuote(timer); } function changeQuote(timer){ console.clear(); console.log(timer); setTimeout(quoteInit,timer); } quoteInit(); 

 body{ font-family: Arial, Helvetica, sans-serif; text-align: center; } h4{ font-size: 2em; font-weight: 700; margin: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="quote"> <h4></h4> <p></p> </div>