防抖 && 节流

前端页面中,用户会频繁的触发一些事件,而对于DOM的操作,资源的加载,等耗费性能的处理,都有肯可能造成页面卡顿,甚至浏览器的崩溃.函数节流和防抖就是处理这类事件.

1. 节流

   函数节流就是预定只有在大于等于执行周期的时候,才会执行,在周期内调用不执行.

   举个例子: 一个按钮绑定了一个函数,点击一次按钮,函数执行一次,如果多次点击,函数执行多次,那么在这个过程之中,这个点击事件如果是加载什么网络资源,频繁的加载会造成浏览器阻塞,点击量过大的点击,比如脚本恶意攻击,会造成服务器瘫痪之类的问题.

   所以我们利用节流: 设置3秒内只能点击一次,多次点击无效

   应用场景:

   1. 窗口调整
   2. 页面滚动
   3. 抢购点击

   // 1     // click                                                  --------------- 
         <渡一教育>
          的js视频
         

   1. 防抖

   引用别人说的就是,函数在执行一次以后在某一段时间以内,不能再次执行,如果在这么一段时间内,触发这个函数,那么就重新计算等待时间.

   function debounce(handel, delay) {  let timer  return function () {    if (timer) {      clearTimeout(timer)    }    timer = setTimeout(() => {      handle.apply(this, arguments)    }, delay)  }}

   函数防抖和函数节流 区别就是,函数节流就是规定三秒钟执行一次,你一直按按钮也只是三秒执行一次,防抖规定三秒执行一次,你一直摁,不好意思你犯规了,继续等三秒,