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

我有一个显示引号的滑块。有些引号比其他引号长，我想提供给用户足够的时间来阅读它们。定时器变量在changeQuote函数中得到更新，但它不更新setInterval函数的参数。我如何更新setInterval的毫秒参数？由于在Javascript中更新setInterval函数的毫秒参数

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();

来源

2016-05-20 Thomas Grauer

'setInterval'指运行所提供的功能*每个* X毫秒。你在做什么是创建*多*间隔是所有*同时运行。您需要a）使用'setTimeout'代替或b）在重新设置之前使用'clearInterval（）'清除间隔。 –

您将不得不创建一个函数，以新的时间间隔停止并重新启动计时器。编辑：啊，Rocket Hazmat击败了我。 – s1h4d0w

@ s1h4d0w：不要担心，我仍然赞成你的评论:) –

添加到我的评论，使用这样的停止和重新启动定时器：

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

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

直接让stop()和start()当你想重新用不同的间隔时间的定时器（后改变了课程的timer）。这将停止计时器（使用您的旧timer值）并使用新值重新启动计时器。

来源

2016-05-20 22:43:05 s1h4d0w

正如大家所说，只是改变setInterval到setTimeout正常工作：

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>

来源

2016-05-20 22:44:57 blex

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

回答

相关问题