JS进阶 | 解决JQ keyup事件延迟的问题

写在前面

　　在使用keyup事件时，存在一个问题，假如想要做出类似于表单验证的demo：表单输入账号 “xxx” 后再去ajax异步去后台数据库匹配，但是keyup事件的原理是每次键盘事件弹起就会检测，也就是输入“x”的时候就会检测，所以输入“xxx”就会使用三次ajax，这样的用户体验是不好的。再举一个例子，再用百度的时候，打开www.baidu.com 输入任意一个字符，就会自动弹出关于该字符的搜索信息，我感觉这个用户体验不好，我在输入一个字符的时候，百度搜索框下面某个新闻我很感兴趣，但是页面已经跳转，我history(-1)时，发现新闻页已经刷新了。这样我就看不到我想要看的新闻了。所以在输入“xxx”完整的字符再触发keyup事件显得比较重要。

如何实现

　　这个问题就是keyup事件延迟的问题。如何实现，很简单，就是使用定时器setTimeout和event.timeStamp。假设定期器为1000ms，定时器负责1000ms后触发keyup事件，setTimeout的原理就是，把当前事件的执行结果放入事件循环中，待JS引擎空闲时再去处理执行结果。event.timeStamp是一个事件的时间戳，表示发生事件的时间和日期（从 epoch 开始的毫秒数）epoch 是一个事件参考点。在这里，它是客户机启动的时间。

　　在keyup事件中引用event.timeStamp，last = event.timeStamp

　　在定时器中进行判断 if(last==event.timeStamp) 为真则执行ajax

　　原理就是，last代表最后一次keyup的时间戳，你停止输入1000ms内没有再次触发keyup事件，则执行ajax，用代码表示就是(last==event.timeStamp)为真，如果你1000ms又触发了keyup事件，则继续判断，如果你停止输入1000ms内没有再次触发keyup事件，则执行ajax。

　　用代码完成

　　js：　

// <input type="text" id="input">

    $(function(){

        $("#input").focus();

        $("#input").on("keyup",function(e){

            $this = $(this);

            last = e.timeStamp;

            setTimeout(function(){

            // console.log(e.timeStamp);

            var $data_data = $this.val();

                if(last-e.timeStamp===0){

                    $.ajax({

                        type:"get",

                        url:"ajaxkeyup.php",

                        data:{

                            $data:$data_data

                        },

                        success:function(data){

                            console.log("ajax发送并接收响应成功显示的ok");

                            console.log(data);

                        },

                        onerror:function(){

                            console.log("not ok");

                        }

                    })

                }

            },1000)

        })

    })

　　php：

<?php

    $data = '123';

    $getData = $_GET['$data'];

    if ($getData==$data) {

        echo "后台检测匹配失败显示的ok";

    }else{

        echo "后台检测匹配失败显示的failed";

    }

 ?>

　　模拟数据库的数据为“123”，完整输入“123”后执行ajax

　　demo如下

　　有点不清晰，但是效果就是当输入"123"时触发keyup事件，执行ajax，显示ajax发送并接收成功，后台服务器也返回成功

　　当输入“1234”时，ajax发送并接收成功，但是后台检测失败

总结

　　这个问题是面试商汤科技呗问的问题，上一个被问的问题是promise实现红绿灯，这个问题是keyup事件的延迟。都使用了异步的操作方式，蚂蚁金服面试的时候也问JS有哪些异步操作，看来异步操作是JS的核心之一。

　　分析JS异步操作

　　定时器setTimeout与异步ajax同时执行，既有页面无刷新的魅力也有事件循环的感觉。爽。