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

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

您将在每次点击时创建一个新的重复回调。因此，单击一次后，您就会重复加载该键；第二次单击后，您还会重复加载该键，并且两者会困惑地混合在一起。第三次点击会添加第三次重复回调。

如果您只想在短暂延迟后发生一次，请使用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);
});

或者，只需将最新的 key 存储在闭包之外，以便间隔拾取它:

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