9-短时间内重复请求导致的数据不匹配问题解决方案

前提条件：问题出现的操作为第一次点击搜索请求全部数据，在数据未返回时，输入条件点击搜索进行第二次请求，表格展示的数据为第二次请求返回的数据，但是双击查看时确实第一次请求的数据信息

通过打印table.render的完成回调done结果得知，是第二次请求的结果先返回，第一次请求的结果后返回，且在第一次请求返回结果后table并没有重新render

查找资料得知：layui.table不会自动重新渲染表格是因为它更关注于数据的渲染本身，而不是数据的来源或获取过程。只能由开发者根据具体的应用场景和需求来决定何时以及如何重新渲染表格，所以说，这种情况无法避免，只能减少出现

过程：

第一个方案也时最简单的解决方案，就是在第一次请求未返回前不允许进行第二请求

这种方案的实现方式就是，在点击搜索后且结果返回前，让搜索按钮禁用，在结果返回后解除禁用

$(".searchBtn").attr('disabled',true)
$(".searchBtn").css('background-color','#adadad')
$(".searchBtn").append('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop loadIcon"></i>')
table.render({
     elem: '#test2',
     url: '...',
     method: "post",
     where: {
       "InputJson": JSON.stringify(ddllargs)
     },
     response: {
        statusCode: 1, //规定成功的状态码，默认：0
     },
     cols: [
        [{
            type: 'checkbox'
          }, 
          ...
         ]
     ],
      done: function(res, curr, count) {
          $(".searchBtn").attr('disabled',false)
          $(".searchBtn").css('background-color','#006eb4')
          $(".loadIcon").remove()
      }
});

或者定义一个全局参数记录是否点击了搜索按钮，在结果返回前，若再次点击，则判断这个参数的状态进行提示“数据正在请求中，无法重复请求”，待结果返回后，再重置参数值（方式很多，视具体情况而定，这里仅提供参考）

第二种方案为防抖，防抖是在事件被触发后n秒内函数只能执行一次，如果在这n秒内又被重新触发，则重新计算执行时间。就是短时间内只执行最后一次点击的请求

可以直接引入现成的Loadash库实现

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

在点击搜索提交表单时使用_.debounce防抖方法

form.on('submit(formDemo)', _.debounce(function(data) {
    //do something
},1000))

也可以自定义防抖函数（简单记录，网上很多）

function debounce(func, wait) {  
   let timeout;
   return function() {  
     const context = this;  
     const args = arguments;
     clearTimeout(timeout);  
     timeout = setTimeout(() => func.apply(context, args), wait);  
   };  
}

第三种方案为节流，节流是保证一段时间内只触发一次函数。就是短时间无论点击多少次，仅执行第一次点击的请求

form.on('submit(formDemo)', _.throttle(function(data) {
    //do something
},5000))

自定义节流函数（简单记录，网上很多） 

function throttle(func, limit) {  
    let inThrottle;  
    return function() {  
        const context = this;  
        const args = arguments;  
        if (!inThrottle) {  
            func.apply(context, args);  
            inThrottle = true;  
            setTimeout(() => inThrottle = false, limit);  
        }  
    };  
}  

一般来说，还是怎么方便怎么来，第一种方案就比较通俗易懂，用户体验方面也能理解

第二种方案，由于是将防抖绑定在监听提交表单的事件上，如果表单输入项较少的情况可以考虑使用，输入项较多的情况就不考虑了

第三种方案，也只是提供参考，正常情况下是宁愿执行最后一次也不会想要执行第一次，而且对于后输入的表单项也需要管理，相对来说就复杂了，不过也看具体需求

所以，选一  >-< ！

坚持就是胜利！