Javascript 确定用户何时键入_Javascript_Ajax

Javascript 确定用户何时键入

javascript ajax

Javascript 确定用户何时键入,javascript,ajax,Javascript,Ajax,我正在构建一个搜索框（输入字段），该搜索框应该进行服务器调用，以过滤插入文本的网格，但我需要以智能方式进行此操作，只有在用户停止时，我才需要启动服务器调用。现在我正在尝试实现它，但如果有人知道如何实现它，我将非常高兴。无论如何，如果我先做，我会把答案贴在这里。。。顺致敬意，詹姆按下某个键时：检查是否存在计时器-如果存在计时器，请停止启动计时器计时器过期时，调用服务器方法我对JavaScript了解不多，但您可以使用一个计时器（比如设置为5秒），在输入框中的每个更改事件中重置该

我正在构建一个搜索框（输入字段），该搜索框应该进行服务器调用，以过滤插入文本的网格，但我需要以智能方式进行此操作，只有在用户停止时，我才需要启动服务器调用。现在我正在尝试实现它，但如果有人知道如何实现它，我将非常高兴。无论如何，如果我先做，我会把答案贴在这里。。。顺致敬意，詹姆

按下某个键时：

检查是否存在计时器-如果存在计时器，请停止

启动计时器

计时器过期时，调用服务器方法

我对JavaScript了解不多，但您可以使用一个计时器（比如设置为5秒），在输入框中的每个更改事件中重置该计时器。如果用户停止键入超过5秒，计时器将过期并触发提交

这种方法的问题在于，每次暂停时都会触发提交，例如，如果用户停止键入以等待休息时间。您必须查看用户是否接受此操作。

您可以使用对

setTimeout

的调用，在按键事件中调用服务器功能（可能有2-3秒的延迟）。按下akey键后，立即取消上一个

setTimeout

调用并创建一个新的调用

然后，在没有按键的情况下已过2-3秒，服务器事件将被触发。

感谢您的反馈。我已经实现了这段代码，它似乎完成了任务（使用jquery）：


var区间=500；
var filterValue=“”；
$（文档）.ready（函数（）{
$（“.txtSearch”）.bind（“keypress”，logKeyPress）；
});
函数logKeyPress（）{
var now=new Date（）.getTime（）；
var lastTime=此按钮。|现在按|；
此按钮。_keyPressedAt=now；
如果（！this.\u监视搜索）{
这是。_monitoringSearch=true；
var输入=此；
window.setTimeout(
函数（）{
搜索（输入）；
}, 0);
}
}
功能搜索（输入）{
var now=new Date（）.getTime（）；
var lastTime=输入。\按键盘输入；
如果（（现在-上次）>间隔）{
/*console.log（现在）；
console.log（上次）；
console.log（现在-上次）*/
if（input.value！=filterValue）{
filterValue=input.value；
//console.log（“搜索！”）；
警报（“搜索！”）；
}
输入。_monitoringSearch=false；
}
否则{
window.setTimeout(
函数（）{
搜索（输入）；
}, 0);
}
}

这里有一个简单的方法，可以在没有jQuery的情况下工作：

<input type="text" id="TxtSearch" onchange="countDown=10;" />

<script type="text/javascript">

var countDown = 0;
function SearchTimerTick()
{
   if(countDown == 1)
   {
      StopTypingCommand();
      countDown = 0;
   }

   if(countDown > 0)
      countDown--;
}

window.setInterval(SearchTimerTick,1000);

</script>


var倒计时=0；
函数SearchTimerTick（）
{
如果（倒计时==1）
{
StopTypingCommand（）；
倒计时=0；
}
如果（倒计时>0）
倒计时--；
}
设置间隔（SearchTimerTick，1000）；

您可能还需要检查输入框上字符串的长度，否则可能会返回一个巨大的结果集

呵呵。。。你这个聪明的魔鬼！你打字也比我快。穆哈哈：）你认为我是通过了解事情才获得这个代表级别的？哈！呵呵。。。你至少可以给我一个安慰：D，毕竟，我确实知道，我的回答是有帮助的。确保计时器在你考虑“打字”的时间上有一个延迟，这样你就不会有小的停顿。或者，使用onblur事件查看用户何时单击文本框。是的，延迟应取决于查找的强度、您希望它的响应速度，以及用户通常键入的速度。我用了250毫秒进行搜索，在我看来还不错。事件不应该是在键盘上，或者类似的吗？对不起，但我认为这不是一个很好的方式。。。它会不断地反复调用search（）直到间隔结束吗？不会，当上次按下某个键的时间与当前时间之间的差值>到间隔变量（我知道是坏名字）时，它会停止。你自己试试看。这是非常正确的一点——尽管这可能是在服务器端完成的。不过，一定要检查是否有空字符串。感谢您的评论，在实际应用程序中，空框是一个有效的条件过滤器（它意味着显示所有内容），我正在分页结果，因此没有开销。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    var interval = 500;
    var filterValue = "";
    $(document).ready(function() {
        $(".txtSearch").bind("keypress", logKeyPress);
    });
    function logKeyPress() {
        var now = new Date().getTime();
        var lastTime = this._keyPressedAt || now;
        this._keyPressedAt = now;
        if (!this._monitoringSearch) {
            this._monitoringSearch = true;
            var input = this;
            window.setTimeout(
                function() {
                    search(input);
                }, 0);
        }
    }
    function search(input) {
        var now = new Date().getTime();
        var lastTime = input._keyPressedAt;
        if ((now - lastTime) > interval) {
            /*console.log(now);
            console.log(lastTime);
            console.log(now - lastTime);*/
            if (input.value != filterValue) {
                filterValue = input.value;
                //console.log("search!");
                alert("search!");
            }
            input._monitoringSearch = false;
        }
        else {
            window.setTimeout(
                function() {
                    search(input);
                }, 0);
        }
    }
</script>

<input type="text" id="TxtSearch" onchange="countDown=10;" />

<script type="text/javascript">

var countDown = 0;
function SearchTimerTick()
{
   if(countDown == 1)
   {
      StopTypingCommand();
      countDown = 0;
   }

   if(countDown > 0)
      countDown--;
}

window.setInterval(SearchTimerTick,1000);

</script>