当用户在文本框中输入完成时,我想触发一个ajax请求。我不希望它在每次用户键入一封信时运行该函数,因为这会导致大量的ajax请求,但我也不希望他们不得不按回车键。
是否有一种方法,让我可以检测当用户已经完成输入,然后做ajax请求?
在这里使用jQuery !
当用户在文本框中输入完成时,我想触发一个ajax请求。我不希望它在每次用户键入一封信时运行该函数,因为这会导致大量的ajax请求,但我也不希望他们不得不按回车键。
是否有一种方法,让我可以检测当用户已经完成输入,然后做ajax请求?
在这里使用jQuery !
当前回答
每个页面有多个计时器
所有其他答案只适用于一个控制(包括我的另一个答案)。 如果每个页面有多个控件(例如在购物车中),只有用户输入内容的最后一个控件才会被调用。在我的情况下,这当然不是希望的行为-每个控件应该有自己的计时器。
要解决这个问题,你只需要向函数传递一个ID,并维护一个timeoutHandles字典,如下所示:
函数声明:
var delayUserInput = (function () {
var timeoutHandles = {};
return function (id, callback, ms) {
if (timeoutHandles[id]) {
clearTimeout(timeoutHandles[id]);
}
timeoutHandles[id] = setTimeout(callback, ms);
};
})();
功能用途:
delayUserInput('yourID', function () {
//do some stuff
}, 1000);
其他回答
很晚的答案,但我添加它是因为现在是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))
嗯,严格来说不是,因为计算机无法猜测用户何时完成输入。当然,你可以在按下键时触发计时器,并在每次按下键时重置它。如果计时器过期,用户在计时器持续时间内还没有输入-你可以称之为“完成输入”。
如果您希望用户在输入时暂停,则无法知道他们何时完成。
(当然,除非你能从数据中判断他们何时完成)
一旦你检测到文本框的焦点,在键上做一个超时检查,并重置它每次触发。
当超时结束时,执行ajax请求。
它只是一行下划线。js debounce函数:
$('#my-input-box').keyup(_.debounce(doSomething , 500));
这基本上是在我停止输入500毫秒后做某事。
欲了解更多信息:http://underscorejs.org/#debounce
如果有必要让用户离开字段,我们可以使用“onBlur”而不是Javascript中的Onchange
<TextField id="outlined-basic" variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />
如果这是不必要的设置定时器将是一个很好的选择。