Question

我使用setInterval有一个简单的打印功能。单击第一个p时，它会正确显示“第一个”值，但单击第二个值则会闪烁。第一个和第二个值连续打印闪烁。这是我的问题。请帮我停止闪烁并正确打印第二个值。

$(document).on('click', 'p', function() {
    var key = $(this).html();
    setInterval(function() {
        $('#demo').load('e1.php?hash=' + key);
    }, 200);
    //e1.php(<?php echo $_REQUEST['hash'];?>)
});

<p>first!</p>
<p>second!</p><br><br><br><br>
<div id="demo"></div>

Answer 1

您每次点击都会创建新的定期回调。因此，只需点击一下，您就会有key的重复加载;在第二次点击之后，你还有一个key的重复加载，并且这两个混合是混乱的。第三次点击会在混音中添加第三个重复回调。

如果您只想在短暂延迟后发生一次某事，请使用setTimeout，而不是setInterval：

$(document).on('click', 'p', function(){
    var key = $(this).html();
    setTimeout(function() {                  // Just do it *once*
        $('#demo').load('e1.php?hash='+key);
    }, 200);
});

如果您希望它重复出现，但只能使用新的key，那么您需要存储上一个计时器的句柄并在启动新的定期计时器之前将其取消：

var loadHandle = 0; // 0 is an invalid handle we can clear safely
$(document).on('click', 'p', function(){
    clearTimeout(loadHandle);
    var key = $(this).html();
    loadHandle = setInterval(function() {
        $('#demo').load('e1.php?hash='+key);
    }, 200);
});

或者，只需将最近的密钥存储在闭包之外，以便间隔选择它：

var key = null;
$(document).on('click', 'p', function(){
    if (key === null) {
        // First click, start the recurring callback
        setInterval(function() {
            $('#demo').load('e1.php?hash='+key);
        }, 200);
    }

    // Remember the (new) key that callback should use
    key = $(this).html();
});

如何停止设置间隔结果值闪烁

1 个答案: