Javascript 如何等到用户在文本输入中完成写操作后再调用函数?

Javascript 如何等到用户在文本输入中完成写操作后再调用函数?,javascript,html,Javascript,Html,我正在设计一个网站,我希望能够在最后一次用户输入后1秒调用函数。我尝试使用onKeyUp,但在第一次击键后等待了1秒 有人知道这怎么可能吗?没关系,我找到了一个方法。我在每个onkeyup()上调用一个函数,该函数递增一个计数器,然后等待1秒。经过1秒后,它递减计数器并检查它是否等于0 var keystrokes = 0; function askAgain() { ++keystrokes; setTimeout(reveal, 1000); } function reve

我正在设计一个网站,我希望能够在最后一次用户输入后1秒调用函数。我尝试使用onKeyUp,但在第一次击键后等待了1秒


有人知道这怎么可能吗?

没关系,我找到了一个方法。我在每个onkeyup()上调用一个函数,该函数递增一个计数器,然后等待1秒。经过1秒后,它递减计数器并检查它是否等于0

var keystrokes = 0;
function askAgain()
{
    ++keystrokes;
    setTimeout(reveal, 1000);
}

function reveal()
{
    --keystrokes;

    if (keystrokes == 0)
        alert("Watch out, there is a snake!");
}

您可以使用
keyDown
(或
keydup
)事件将函数设置为在1秒内运行,如果用户在1秒内键入另一个键,则可以清除超时并设置新的超时

例如


另一种类似的方法,没有全局:

var typewatch = function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    }  
}();    



您可以修改这个代码段。

只需修改html输入,并将第一行放入现有函数中,这样您就不必重新编写任何代码。它也不会影响任何旧的代码调用函数,因为如果未设置
onkeypress
,则
mykeypress
将始终小于1

var mykeypress=0;
var mysleep=1000; //set this higher if your users are slow typers
function mytest(id,text) {
   mykeypress--; if(mykeypress > 0) { return; }
   //anything you want when user stops typing here
   alert("Keypress count at "+mykeypress+" ready to continue 
id is "+id+" arguement is "+text);
}

input type="text" name="blah" id="55" onkeypress="mykeypress++"
onkeyup="myid=this.id;setTimeout(function (){mytest(myid,'a test')},mysleep)"
REVERT to old way seamlessly:
input type="text" name="blah" id="55" onkeyup="mytest(this.id,'a test')"
我做了一个简单的例子。它需要的代码比一些建议的解决方案少得多,而且非常轻(~0,6kb)

首先,您创建的
Bid
对象可以在任何时候
碰撞。每次撞击都会在下一个给定的时间段内延迟触发竞价回叫

var searchBid = new Bid(function(inputValue){
    //your action when user will stop writing for 200ms. 
    yourSpecialAction(inputValue);
}, 200); //we set delay time of every bump to 200ms
Bid
对象准备就绪时,我们需要以某种方式
bump
它。让我们将碰撞附加到
键控
事件

$("input").keyup(function(){
    searchBid.bump( $(this).val() ); //parameters passed to bump will be accessable in Bid callback
});

这里发生的是:

每次用户按键,出价都会在接下来的200毫秒内“延迟”(颠簸)。如果200毫秒将通过而没有再次“碰撞”,则将触发回调

此外,您还有两个附加功能,用于停止出价(例如,如果用户按下esc键或单击外部输入),以及立即完成和触发回调(例如,当用户按下enter键时):


嘿,太好了。如果有人打字速度非常快,他们可能需要等待几秒钟才能看到信息:-)@DanF我不是很确定,但我想说,即使你打字速度非常快,你也只需等待一秒钟,因为当你按下最后一个键时,您将设置使击键为0的超时:-)您可以使用当用户离开字段并移动到表单中的下一个字段时发生的事件。然后,你可以在那里添加等待代码,并在字段更改后1秒触发。没有直接的、100%的方法可以做到这一点。最简单的方法是使用输入的模糊事件。(其他方法可能是在用户完成键入后等待X秒)。我将使用对象失去焦点时发生的事件。因此,它可以确保用户一旦离开该字段,就意味着他/她已经完成了信息输入。有趣的问题-你为什么要这样做,有什么特别的原因吗?基本上,当用户在文本框中完成输入后,他会看到一个新的文本框。因为文本框是最后一个,所以我不能使用onBlur(),因为我必须等到焦点集中在另一个框上。下面的答案不使用globals,这是一个非常好的方法。a++10用于在不使用globals的情况下执行,1用于使用突兀的javascript。我建议使用这段代码,然后在keyup函数中调用它,而不是在元素中附加onclick。
var searchBid = new Bid(function(inputValue){
    //your action when user will stop writing for 200ms. 
    yourSpecialAction(inputValue);
}, 200); //we set delay time of every bump to 200ms
$("input").keyup(function(){
    searchBid.bump( $(this).val() ); //parameters passed to bump will be accessable in Bid callback
});
searchBid.stop();
searchBid.finish(valueToPass);