用户完成键入而不是按键时运行javascript函数？

Question

我想在用户输入文本框时触发ajax请求.我不希望它在每次用户键入字母时都运行该函数,因为这会导致大量的ajax请求,但是我不希望它们也必须按下回车按钮.

有没有办法可以检测用户何时完成输入然后执行ajax请求？

在这里使用jQuery!戴夫

Answer 1

所以,我猜猜完成打字就意味着你停了一会儿,说5秒钟.因此,考虑到这一点,让我们在用户释放密钥时启动计时器,并在按下密钥时清除它.我决定有问题的输入是#myInput.

做一些假设......

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Answer 2

上面选择的答案不起作用.

因为打字定时器被多次设置(在快速打字机等触发keydown之前按两次键盘)然后它没有正确清除.

下面的解决方案解决了这个问题,并在OP请求完成后调用X秒.它也不再需要冗余的keydown功能.我还添加了一个检查,以便在输入为空时不会发生函数调用.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

和vanilla JavaScript解决方案中的相同代码:

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

这个解决方案确实使用ES6,但这里没有必要.只需更换let与var并用常规的功能箭头功能.

Answer 3

它只有一行 with underscore.js去抖功能:

$('#my-input-box').keyup(_.debounce(doSomething , 500));

这基本上是在我停止打字后500毫秒的doSomething.

欲了解更多信息:http://underscorejs.org/#debounce

Answer 4

是的,您可以在每个启动事件上设置2秒的超时,这将触发ajax请求.您还可以存储XHR方法并在随后的按键事件中将其中止,以便您节省带宽甚至更多.这是我为自己的自动完成脚本编写的内容.

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

希望这可以帮助,

马尔科

Answer 5

迟到的答案，但我添加它是因为它是 2019 年，这完全可以使用漂亮的 ES6 实现，没有第三方库，而且我发现大多数评价很高的答案都很笨重，而且变量太多。

来自这篇优秀博客文章的优雅解决方案。

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(function () { callback.apply(this, args); }, wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))

Answer 6

var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

这里有完整的例子:http://jsfiddle.net/ZYXp4/8/

Answer 7

我喜欢Surreal Dream的答案,但我发现我的"doneTyping"功能会触发每个按键,即如果你真的很快输入"Hello"; 当你停止输入时,该功能只会发射一次,而不是只发射一次.

问题是javascript setTimeout函数似乎没有覆盖或杀死已设置的任何旧超时,但如果你自己这样做它就可以了!所以我只是在setTimeout之前添加了一个clearTimeout调用,如果设置了typingTimer.见下文:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').on("keydown", function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

NB我本来希望将此作为对Surreal Dream答案的评论添加,但我是新用户并且没有足够的声誉.抱歉!

Answer 8

声明以下delay函数：

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

然后使用它：

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});    

Answer 9

修改已接受的答案以处理其他案例,例如粘贴:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example
var $input = $('#myInput');

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Answer 10

前两个答案都不适合我.所以,这是我的解决方案:

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});

Answer 11

const inText = document.getElementById('inText')
const outText = document.getElementById('outText')
const delay = 1000

let timer
inText.addEventListener('input', code => {
  clearTimeout(timer);
  timer = setTimeout(x => {
    outText.innerHTML = inText.value
  }, delay, code)
})

<textarea id='inText'>edit this and...</textarea>
<pre id='outText'>see the results after you stop typing for one second</pre>

Answer 12

我认为在这种情况下，keyDown事件不是必需的（请告诉我为什么我错了）。在我的（非jquery）脚本中，类似的解决方案如下所示：

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

这是我对Stack Overflow的第一个答复，所以我希望有一天能对某人有所帮助：）