js防抖和节流

js防抖和节流的初步认识，一只小白正在学习…

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、节流和防抖是什么？

为什么会出现节流和防抖？
在前端开发中一部分的用户行为会频繁的触发事件执行,对DOM的操作，资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器崩溃，
短时间内大量的触发某函数导致的性能的问题

二、使用步骤

1.节流

节流 周期性的执行第一次 可用于调用接口，http请求
flag原本为false，赋值为了true，直接执行定时器，但时间没到，又再次点击，所以把flag执行if判断 return(break)终止，直到时间到了触发，赋值为false再次循环。
周期性的节省http请求 ！！！！！！

代码如下（示例）：

 <button onclick="jieliu()">节流事件</button>
 <script>
var flag = false;
  function jieliu(){
    if(flag){
      console.log('flag',flag)
      return 
    }
    flag = true;
    setTimeout(()=>{
      console.log(888)
       flag = false;
    },1000)
  }
   </script>

2.防抖

防抖 周期性的只执行最后一次 可用于下拉菜单等
延迟点击,一直点，一直清空定时器，直到不点击了，再触发计时器的3秒后执行。
延迟性获取信息 让他后悔！！！！！！
代码如下（示例）：

  <button onclick="fangdou()">防抖事件</button>
  <script>
    var timer = null; 
    function fangdou(){
      clearInterval(timer)
      timer = setTimeout(()=>{
         console.log(666)
      },1000) 
    }
   </script>

---

总结

节流应用

窗口调整(resize)、页面滚动(scroll)、抢购和疯狂点击(mousedown)、input 事件（实现实时关键字查找）
可用于调用接口，http请求

防抖应用

实时搜索(keyup) 、 拖拽(mousemove)、短信验证码
可用于下拉菜单等