新手注意！！！ 简单封装实用防抖与节流， 让你的项目性能提升不在

立志做一个情感博主的程序员

---

新手注意！！！ 简单封装实用防抖与节流， 让你的项目性能提升不在话下

v2-016a7643fa92e095e97aa8df10a549a7_hd.jpg

函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。
1 函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
2 函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车

节流（throttle） let's go~

你是否在日常开发中遇到一个问题, 滚动事件中会发起网络请求， 我们都不希望在滚动或者输入过程中一直发起请求， 而是隔一段时间发起一次， 对于这种情况我们就可以使用节流。

// func是用户传入需要防抖的函数
// wait是等待时间
const throttle = (func, wait = 50) => {
  // 上一次执行该函数的时间
  let lastTime = Date.now()；
  return function(...args) {
    // 当前时间
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}

setInterval(
  throttle(() => {
    console.log(1)
  }, 500),
  1
)

是不是超级简单， 学会了吗亲 lol

防抖（debounce） let's gogogo!

考虑一个场景，模糊搜索 ---- 有一个输入框每次输入都会触发网络请求，但是我们并不希望每次输入都发起请求，而是当用户最后一次输入结束一段时间后没有再次输入的情况才去发起网络请求，对于这种情况我们就可以使用防抖。

防抖函数分为非立即执行版和立即执行版。

非立即执行版本

// func是用户传入需要防抖的函数
// wait是等待时间
  const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
    func.apply(this, args)
    }, wait)
  }
}

立即执行版本

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

学会了吗亲～

---

一个引人深思的问题
很久很久之前就讨论过强奸判刑这个问题， 我始终认为强奸判刑太轻了， 但立法者在很大的限度上一定是对的， 我始终不明白这个问题。
直到昨天我看到了答案
“法律要留有余地， 这个余地不是给施暴者， 而是给受害者一个生还的机会。”
我被深深的震撼到了。
是啊， 如果强奸是死刑， 杀人也是死刑， 奸杀也是死刑， 罪犯会怎么做。

大家好， 我是码农届的柏拉图， 看完记得点赞哦～