Question

我有一系列数组，我正在使用jquery循环一个接一个地显示。

现在我想在用户点击“立即停止”按钮时停止它。

HTML：

<h1>Lorem ipsumd dolor sit amet.</h1>
<div id="div1">Answer One</div>
<div class="stop">
    <button>Stop it Now.</button>
</div>

CSS：

body{text-align:center;}
h1{padding:30px; margin:0 0 0 30px;}
#div1{padding:20px;margin-top:0; text-align:center;}

的jQuery

$(document).ready(function() {

var items = ["Answer Two", "Answer Three", "Answer Four", "Answer Five", "Answer Six", "Answer One"],
    $text = $( '#div1' ),
    delay = .2; //seconds

function loop ( delay ) {
    $.each( items, function ( i, elm ){
        $text.delay( delay*1E3).hide();
        $text.queue(function(){
            $text.html( items[i] );
            $text.dequeue();
        });
        $text.show();
        $text.queue(function(){
            if ( i == items.length -1 ) {
                loop(delay);   
            }
            $text.dequeue();
        });
    });
}

loop( delay );
});

我怎样才能做到这一点？

Answer 1

一种解决方案是使用.stop(true, false)。执行此操作将清除队列，而不执行挂起的功能。

                [cancelButton addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                  attribute:NSLayoutAttributeWidth
                                                  relatedBy:NSLayoutRelationEqual
                                                     toItem:nil
                                                  attribute:NSLayoutAttributeNotAnAttribute
                                                 multiplier:1.0
                                                   constant:80.0]];

                [cancelButton addConstraint:[NSLayoutConstraint constraintWithItem:cancelButton
                                                  attribute:NSLayoutAttributeHeight
                                                  relatedBy:NSLayoutRelationEqual
                                                     toItem:nil
                                                  attribute:NSLayoutAttributeNotAnAttribute
                                                 multiplier:1.0
                                                   constant:80.0]];

Updated Fiddle

Answer 2

使用旗帜。试试这个：

# Change outside parens to brackets, [], for list comp
hnd = (function_f(x, model) for x in list_value)

Answer 3

如果更改用于实现计时器的逻辑，它会使代码更简单，也意味着您只需在计时器上调用clearInterval即可停止文本更改。试试这个：

$(document).ready(function() {
    var items = ["Answer Two", "Answer Three", "Answer Four", "Answer Five", "Answer Six", "Answer One"],
        $text = $('#div1'),
        delay = 200, // miliseconds
        itemIndex = 0;

    var interval = setInterval(function() {
        $text.text(items[itemIndex % items.length]);
        itemIndex++;
    }, delay);

    $('button').click(function() {
        clearInterval(interval);
    })
});

Example fiddle

Answer 4

我添加了一个名为＆＃34; stopLoop＆＃34;的参数。正被初始化为假。单击按钮后，该参数变为true并停止循环。这里：http://jsfiddle.net/fcLso5c9/9/

$(document).ready(function() {
var stopLoop = false;

$（＆＃34; button＆＃34;）。click（function（）{stopLoop = true;}）; var items = [＆＃34; Answer Two＆＃34;，＆＃34; Answer Three＆＃34;，＆＃34; Answer Four＆＃34;，＆＃34; Answer Five＆＃34;，＆＃34; Answer Six＆＃34;，＆＃34;回答一个＆＃34;]， $ text = $（＆＃39;＃div1＆＃39;），延迟= .2; //秒

function loop ( delay ) {
    if (stopLoop) return;
    $.each( items, function ( i, elm ){
        $text.delay( delay*1E3).hide();
        $text.queue(function(){
            $text.html( items[i] );
            $text.dequeue();
        });
        $text.show();
        $text.queue(function(){
            if ( i == items.length -1 ) {
                loop(delay);   
            }
            $text.dequeue();
        });
    });
}

loop( delay );

}）;

您可以使用几乎相同的代码来启动/停止功能

单击按钮时停止循环功能

4 个答案: