快速点击：异步请求数据会在界面中展示多条相同数据

需求描述：

搜索关键字 查找并显示结果，查询并涉及到分页。

代码逻辑：

//监控 input 搜索事件
    $("#search").on('keypress',function(e) {
        var keycode = e.keyCode;
        orderObj.content = $(this).val();
        if(keycode=='13') {
            e.preventDefault();
            pageNum=1;//将页面回到1
            $("#searlist").html("");//清除之前的内容
            getDataList();
            $("#scrollload").addClass("none");
        }
    });
//显示dom内容
$("#searlist").append(htmlStr);
/*
这么做会出现一个问题：那就是点击很快的情况下，页面会重复dom内容
*/

问题分析：

点击2次查询 ，正确的执行顺序是 ABAB(A是清空dom，B 展示查的dom内容)

请求数据需要时间 time2 ，

点击间隔 time1，

如果 time1小于 time2，由于是异步的，就会造成 AABB的执行顺序！！！即数据重复了

解决方式：

加一个变量 判断是否请求结束~~ 依据这个变量 判断是否执行请求

var loadend = false;
//监控 input 搜索事件
    $("#search").on('keypress',function(e) {
        var keycode = e.keyCode;
        orderObj.content = $(this).val();
        if(keycode=='13') {
            e.preventDefault();
            pageNum=1;
            $("#searlist").html("");
            if(loadend){
                getDataList();
            }
            $("#scrollload").addClass("none");
        }
    });
function getDataList(){
      loadend = false
     //.执行查询.....
    // 查询出了结果 将 loadend 变true

     loadend = true

}

 

666