简单的防抖节流操作

目录

防抖

为什么需要防抖 环境

节流

环境

---

防抖

为什么需要防抖 环境

1、在开发过程里面 有没有遇到过 输入框的输入时间 “input” 每次输入都会触发一次对应的事件，这样不仅浪费性能，个人感觉体验还不是特别好 没输入一次就出发一次，这样的情况，如果涉及大量数据的匹配筛查，是不是就会特别的难受，我都还没有指明我要筛选哪些数据，就开始筛选，不够精确，增加了界面渲染和后端服务器的压力

2、那有没有呀可以等我输入完了再做判断筛选 或者我不输入了再进行筛选的操作 ？？？还真的有：那就是 防抖

3、防抖简单讲就是在事件被触发后n秒后再执行，并且如果一直操作只有最后一次生效

那我们要怎么做
分析一下：

• 1.n秒后执行 是不是应该有一个延迟执行函数，想到了吗？对就是 setTimeout,
• 2.要保证每一次的执行都要判断是不是在n秒内 是不是应该有一个变量来管理 timer
• 3.那按什么来判断是否满足执行条件，都说了是n秒 那么就用自定义的aweit
• 原理逻辑都有了 那么我们来看看代码

function fd(fn,aweit){
let timer
return function(){
//闭包函数  为了延长变量的生命周期 下一次还要用 
if(timer) clearTimeout(timer)
timer = setTimeout（（fn,aweit）
}
}

节流

环境

节流是在单位时间里面只执行一次 例如一个仿websocket 的操作 不断轮循获取后台最新数据 每隔一段时间操作一次获取数据，展示到前端界面
但是这里不是轮循 而是阻止，在单位时间只执行一次，就算连续操作也不执行
代码：

   function jl（fn,aweit）{
    let lastime = 0；//为啥一开始是0 而不是一个最新的时间戳，因为第一次执行是要的，不管何时第一次都是及时响应的
    return function(){ //为啥老是用闭包  闭包是为了让这个区域的某个变量周期延长 不被浏览器的垃圾回收机制删除  下一次还要用嗯     离开界面记得把它清理掉
    let now = new Date().getTime();  //转一下  不然你试试
    if(now - lastime >= aweit){
    fn.apply(this);//看个人需要是否需要引入函数或者写里面也可以
    lastime = new Date().getTime(); //这样吧当前的时间给到变量，下一次要用
}
}
}