mrcao

V1

2022/05/04阅读:38主题:蔷薇紫

防抖和节流还不会?用游戏的例子教会你!

前言

你的每一份经历,不管是顺境还是坎坷,都会增加你生命的厚度。所有的苦,以后都会笑着说出来。加油,朋友!


话不多说,先来看一张图 对于普通滚动来说,如果不加以优化,页面可能会出现“卡顿”现象。为了保证页面性能。 需要做 处理

使用场景

  • 淘宝购物时,如果你连续点击支付按钮,你会发现它只响应一次
  • google或者bing搜索时,连续输入或者删除文字时,不会立即请求服务器,下面的联想搜索功能不会立即发生改变
  • 鼠标连续滚动事件
  • 按钮点击事件等

防抖

作用:高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定事件内再次触发,那么重新计算时间

类似于LOL中的 技能,如果 会打断,再次 就要等8秒(不考虑先锋和男爵Buff)

实现代码

// 为需要防抖的事件封装一个防抖函数
function debounce(fn,time) {
 // 存放定时器的返回值,用来清除定时器
  let timer = null
  return (...args)=>{
    // 触发了需要防抖的事件,把前一个定时器清除掉
    clearTimeout(timer)
    timer = setTimeout(()=>{
      fn(...args)
    },time)
  }
}

原理图

节流

作用:对于高频率的触发事件,在指定的时间内,只响应第一次

类似于LOL里的英雄平a,不管你手速多么快,一定都是在指定时间内只攻击一次。当买了加攻速的装备后,实际上这时候“指定的时间”会变很短,这时候就是考验你的手速了,嘿嘿~

实现代码

functio throttle(fn,time) {
  // 保存一个节流阀
  let temp = false
  return () => {
    if(temp) return
    else {
      temp = true
      setTimeout(()=>{
        // 执行外部传入的函数
        fn.apply(this,arguments)
        temp = false
      },time)
    }
  }
}

原理图

不过实际写项目我都会使用别人封装好的防抖节流函数(绝对不是因为我懒2333

这里我推荐lodash库 点击去lodash官网

分类:

前端

标签:

JavaScript

作者介绍

mrcao
V1