当前位置: 首页 > 面试题库 >

JavaScript如何延迟.keyup()处理函数,直到用户停止键入?

古畅
2023-03-14
问题内容

我有一个搜索字段。现在,它会搜索每个键。因此,如果有人键入“ Windows”,它将使用AJAX搜索每个键入的内容:“ W”,“ Wi”,“ Win”,“Wind”,“ Windo”,“ Window”,“ Windows”。

我希望有一个延迟,因此它仅在用户停止键入200毫秒时才搜索。

keyup函数中没有为此的选项,我已经尝试过了setTimeout,但是没有用。

我怎样才能做到这一点?


问题答案:

我将这个小功能用于相同的目的,即在用户停止输入指定的时间后或在触发率很高的事件中执行一个功能,例如resize

function delay(callback, ms) {

  var timer = 0;

  return function() {

    var context = this, args = arguments;

    clearTimeout(timer);

    timer = setTimeout(function () {

      callback.apply(context, args);

    }, ms || 0);

  };

}





// Example usage:



$('#input').keyup(delay(function (e) {

  console.log('Time elapsed!', this.value);

}, 500));


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="input">Try it:

<input id="input" type="text" placeholder="Type something here..."/>

</label>

这个怎么运作:

delay函数将返回一个包装的函数,该函数在内部处理一个单独的计时器,在每次执行中,计时器都将按提供的时间延迟重新启动,如果在此时间过去之前发生了多次执行,计时器将重新设置并重新启动。

当计时器最终结束时,将执行回调函数,并传递原始上下文和参数(在此示例中,jQuery的事件对象以及DOM元素为this)。

更新2019-05-16

我已经针对现代环境使用ES5和ES6功能重新实现了该功能:

function delay(fn, ms) {
  let timer = 0
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this, ...args), ms || 0)
  }
}


 类似资料:
  • 我为我的草图创建了一个简单的延迟函数,并试图使用它,但似乎渲染停止了,也就是说,有一个简单的灰色屏幕,然后一切都被一次渲染。 有人能告诉我我在哪里吗出错了?到底发生了什么? 如何在内部定义绘制()和设置()?我知道,set()是一个一次性的渲染和绘制(),就像一个无限的循环。 代码:

  • 问题内容: 我有一个textarea,人们可以自然地输入一些文本,因此我想这样做,以便不时提出AJAX请求,以获取有关textarea的内容的一些建议(例如堆栈溢出的Related Questions,但是对于textarea,而不是文本输入)。问题是我不能在每次按键时都发出AJAX请求(这是无用的,而且非常消耗资源),而且我不确定这样做的最有效方法是什么(每X字?每X秒一次) ? 或者是其他东西

  • 问题内容: 这是我的情况: 我有一个包含用户列表的页面。我通过Web界面创建一个新用户,并将其保存到服务器。服务器在elasticsearch中为文档建立索引并成功返回。然后,我被重定向到不包含新用户的列表页面,因为它可能需要1秒钟的时间才能使文档在Elasticsearch中可供搜索 elasticsearch中的近实时搜索。 elasticsearch指南说您可以手动刷新索引,但说在生产中不要

  • 问题内容: 我有一个jQuery Ajax请求,我想用文本输入调用它,因此我将其嵌套在里面。这很好。 但这有时表现为越野车。当我非常快速地输入一些文本时,我得到的输入单词的结果中省略了原始输入单词的最后几个字母(可能是浏览器的某些错误)。我希望在没有输入活动持续一秒钟的情况下发送ajax请求,如果我很快输入文本并休息一秒钟(意味着我进行了输入)。我怎样才能做到这一点? 问题答案: 听起来好像是从先

  • 问题内容: 我遇到了一个问题,JPA试图在我不想要的时候延迟加载我的数据。从本质上讲,正在发生的事情是我正在使用Service检索一些数据,并且当我将这些数据解析为JSON时,JSON库正在触发hibernate模式以尝试懒惰地加载数据。有什么办法可以阻止这种情况?我在下面给出一个例子。 是否可以将JPA /hibernate设置为不尝试并延迟加载数据? 更新: 我意识到您可以使用FetchTyp