首页 / 问答 / JavaScript/js/jQuery中如何实现等待用户在文本框中完成输入后才触发(延迟触发)事件?

JavaScript/js/jQuery中如何实现等待用户在文本框中完成输入后才触发(延迟触发)事件?

javascript Jquery js 事件 Timeout 1.98K 次浏览
0

在JavaScript/js的前端开发中有一个文本框,现在的需求是:当用户在此文本框中输入文本后,会通过Ajax请求后端接口进行数据的验证。

当前的实现方式是监听文本框的keyup事件,但此实现方案的问题是:每当用户改变文本框的内容(输入或者删除字符)均会触发keyup事件,这与需求不符,需求是等待用户在文本框中完成输入后才触发,即延迟触发keyup事件,而不是输入每一个字符者触发。

使用js或者jQuery应该怎么实现呢?

回复 [×]
提交评论
请输入评论内容

3 个回答

  • 0

    无论是原生的JavaScript/js,还是jQuery,实现的思路大致是:

    1.首先,监听文本框的按键事件,比如<kbd>keyup</kbd>,<kbd>keypress</kbd>,<kbd>paste</kbd>等。

    2.使用setTimeout给监听的事件添加延迟回调。

    3.当监听的文本框事件被触发后,先调用clearTimeout()清除延迟回调。

    4.如果用户停止输入时间超过设定的延迟时间,则触发延迟回调。

    以下是使用jQuery封装的组件:

    调用示例:

    Rector的个人主页

    Rector

    2021-11-15 回答

    • 0

      以下是使用JavaScript/js实现的文本框输入延迟执行方案:

      Rector的个人主页

      Rector

      2021-11-15 回答

      • 0

        或者,你还可以使用jQuery的插件jQuery throttle/debounce,此插件已封装好了延迟执行的函数,只需调用$.debounce()即可实现延迟执行。

        Rector的个人主页

        Rector

        2021-11-15 回答

        我来回答