简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 一道前端面试题
大家讲道理
大家讲道理 2017-04-10 15:06:01
0
9
635

背景：实现网页的搜索框下拉提示，一般是监听keyup或者keydown事件，每输入一个字符都会发送ajax请求，因此极端情况是键盘的频繁输入就会发送很多请求。

问题：怎么优化使得等到用户输入完毕再发送请求以减少请求数？（附上实现代码，假如有个）

大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

répondre à tous (9)
PHPzhong
PHPzhong2017-04-10 15:08:01 9 plancher

知识点：函数节流

也可以看下Underscore对函数节流的实现 调到5.7节，这里有两个需求分析的比较好！和你的问题吻合！

Comme+0
Ajouter une réponse
    黄舟
    黄舟2017-04-10 15:08:01 8 plancher

    直接搜索 throttle or throttling

    我寫過一個 jsfiddle jQuery $.throttle 例子
    1000ms(1s之內), 無論點擊button多少次, 只會更新一次顏色.

    用的就是這個插件here

    Comme+0
    Ajouter une réponse
      小葫芦
      小葫芦2017-04-10 15:08:01 7 plancher

      记录两次触发keyup或keydown的时间间隔t，当t超过一定伐值，例如200ms，再发送请求，这样连续输入的时候不会发送请求

      Comme+0
      Ajouter une réponse
        Ty80
        Ty802017-04-10 15:08:01 6 plancher

        函数节流，或者。。。blur()

        Comme+0
        Ajouter une réponse
          大家讲道理
          大家讲道理2017-04-10 15:08:01 5 plancher

          用事件稀释 设定一个计时器 每次触发keyup或者keydown的时候就让计时器重新计时 如果在设置的时间内没有事件发生就执行相应的程序

          Comme+0
          Ajouter une réponse
            伊谢尔伦
            伊谢尔伦2017-04-10 15:08:01 4 plancher

            除了函数节流，也可以用xhr的abort()来结束ajax的上次请求，不知道符不符合T主的意思？

            Comme+0
            Ajouter une réponse
              伊谢尔伦
              伊谢尔伦2017-04-10 15:08:01 3 plancher

              有两种方法，设定计时器 (setTimeout) 延时执行 AJAX 请求，或者计算 Keyup 次数，到达某次（比如 5）再执行 Ajax！

              Comme+0
              Ajouter une réponse
                阿神
                阿神2017-04-10 15:08:01 2 plancher

                extjs对于combox联想显示触发的处理，采用delay的方法，延迟大概300-500毫秒，如果输入完毕后300-500毫秒依然有输入动作，后面的输入就取消掉前面delay的ajax请求，然后触发一个新的delay。输入速度的快慢不同，并不能后面的操作能够截住前面已经发出的请求。。。

                实现：实现一个delay object，用一个变量记住，每次key事件时，都将这个object复位到延迟300毫秒即可，这样子如果前一次输入和后一次输入之间间隔不到300毫秒，后一次的操作就会将delay复位到300毫秒，自然前一次的delay操作就被取消掉了，重新开始倒计时了

                Comme+0
                Ajouter une réponse
                  左手右手慢动作
                  左手右手慢动作2017-04-10 15:08:01 1 plancher

                  检测input val的文本长度变化了再发请求，或者监听input事件

                  Comme+0
                  Ajouter une réponse
                    Sujets populaires
                    Plus>
                    Articles populaires
                    Tutoriels populaires
                    Plus>
                    Tutoriels associés
                    Recommandations populaires
                    Derniers cours
                    Derniers téléchargements
                    Plus>
                    effets Web
                    Code source du site Web
                    Matériel du site Web
                    Modèle frontal
                    À propos de nous Clause de non-responsabilité Sitemap
                    Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！