在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函數的毫秒參數

回答

相關問題