【input监听用户停止输入】

我们要实现用户停止输入才去请求AJAX的一个功能


在网上看了很多文章, 觉得写得都不是特别好

  1. 基本上都是用库loadsh, 不讲原理思路, 只贴如何用工具实现代码

  2. 看到一个写得非常好的思路,我照着这个思路实现了下这个功能

  3. 利用定时器,让函数执行延迟500毫秒,在500毫秒内如果有函数又被调用则删除上一次调用,这次调用500毫秒后执行,如此往复。就是当你停止输入500毫秒后才会执行函数


来看看用vue实现这样的一个功能, 贴代码

keyword(newVal){
        if(this.lastTime == 0){ 
          this.lastTime = setTimeout(()=>{
            // AJAX(newVal)
          },2000)
        }else{
          clearTimeout(this.lastTime)
          this.lastTime = setTimeout(()=>{
            // AJAX(newVal)
          },2000)
        }
}
  1. watch先监听一下input的值
  2. 我们第一次输入, watch的函数开始调用, this.lastTime初始值我设置为0, 故执行if内语句
  3. if语句内新建一个setTimeout, 且其返回值(这个值是num, 自己console一下)赋值给this.lastTime
  4. 用户开始持续输出时 => watch函数再一次被调用 => 因为this.lastTime不等于0了, 开始进入else语句
  5. else语句清除上一次的延迟函数, 再新建一个延迟函数
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input输入停止输入后触发事件可以通过监听input元素的input事件来实现。当用户input输入框中输入文字时,每输入一个字符都会触发一次input事件。我们可以通过设置一个计时器,在用户停止输入一段时间后触发所需的事件。 具体的实现步骤如下: 1. 监听输入框的input事件,当该事件被触发时,执行相应的处理函数。 2. 在处理函数中,首先清除之前设置的计时器(如果有),然后设置一个新的计时器。 3. 在计时器的回调函数中执行需要触发的事件。在这个例子中,我们可以弹出一个提示框作为示例。 下面是一个简单的实现示例: ```html <!DOCTYPE html> <html> <head> <title>Input Stop Event</title> </head> <body> <input id="myInput" type="text" /> <script> let timer; const inputElement = document.getElementById('myInput'); inputElement.addEventListener('input', function() { clearTimeout(timer); // 清除计时器 timer = setTimeout(() => { alert('输入停止!'); // 在用户停止输入0.5秒后触发事件 }, 500); }); </script> </body> </html> ``` 在以上示例中,我们监听了id为"myInput"的input元素的input事件,并在事件处理函数中设置了一个计时器。当用户输入文字时,每次input事件被触发时,都会清除之前设置的计时器,并重新设置一个新的计时器。当用户停止输入0.5秒后,计时器的回调函数会被执行,触发一个提示框弹出,表示输入已经停止
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值