Question

我有一个显示引号的滑块。有些引用比其他引用更长，我希望为用户提供足够的时间来阅读它们。 timer变量在changeQuote函数中得到更新，但它没有更新setInterval函数的参数。如何更新setInterval的milliseconds参数？感谢

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

添加到我的评论中，使用类似的内容再次停止并启动计时器：

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

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

如果您想以不同的间隔重置计时器（在更改stop()之后），只需拨打start()和timer即可。这将停止计时器（使用旧的timer值）并使用新值重新启动它。

Answer 2

正如大家所说，只需将setInterval更改为setTimeout即可。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: