输入时不刷新

Question

这是我的代码：

// Refresh feeds, but ONLY when you are NOT typing
var refreshId = setInterval(function() {
    $("#load-feeds").load('/actions/loadfeed.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });

我正在开发一种类似于 Facebook 的“墙”，您可以在其中评论彼此的帖子。墙会使用 AJAX 自动刷新（每 9 秒），但是当您键入并且文本字段获得焦点时，它会在页面刷新后移除焦点和文本框的内容。

我怎样才能让它只在你不打字时刷新，在你打字时让它停止。谢谢！我到处寻找并尝试了所有方法，但没有运气。

Answer 1

我想你有一个这样的输入框：

<input type="text" id="input-box" ... />

你所要做的就是维护一个全局变量，而不是说这个输入是否有焦点：

var isTyping = false;
$("#input-box").focus(function() {
    isTyping = true;
});
$("#input-box").blur(function() {
    isTyping = false;
});

那么你只需要在允许更新之前检查这个变量：

// Refresh feeds, but ONLY when you are NOT typing
var refreshId = setInterval(function() {
    if (!isTyping) {
        $("#load-feeds").load('/actions/loadfeed.php?randval='+ Math.random());
}, 9000);
    }
$.ajaxSetup({ cache: false });

Answer 2

您应该在他们输入时保持timeout 计时器运行，并在加载前检查：

var typing = false,
    theTimer,
    refreshId = setInterval(function() {
        typing || $("#load-feeds").load('/actions/loadfeed.php?randval='+ Math.random());
    }, 9000);
$.ajaxSetup({ cache: false });

$('#theInput').keyup(function() {
    typing = true;
    theTimer && clearTimeout(theTimer);

    theTimer = setTimeout(function() {
        typing = true;
    }, 500);
});