细讲防抖和节流

防抖和节流

什么是防抖？https://www.lodashjs.com/docs/lodash.debounce

前面所有的触发都被取消，只有最后一次的触发在规定时间之后才会触发回调。简单来讲，就是在快速触发的情况下，只会触发最后一次

应用场景：百度搜索

详解如下：

​ 假如在页面有一个输入框input，你想在用户搜索的时候给服务器发送请求获取数据，传统写法可能是这样：

let input = document.querySelector('input')
input.oninput=()=>{  //这个oninput事件一般人我不告诉他
    console.log('发送ajax请求');
}
//这样虽能实现效果，但是请求太频繁了，你会发现一按下键盘，就会触发这个回调，若真是发送请求的话，服务器的压力就太大了

​ 引用lodash优化之后的结果：（引入lodash.js之后会多出一个 ‘_ ’ 对象，与JQuery的 ‘$’ 如出一辙）

input.oninput=_.debounce(()=>{
    console.log('发送ajax请求');
},1000)
//你会发现，它永远会在你输入完一秒之后，才会触发回调。不仅切合实际，也能避免昂贵的请求开销
//debounce()是lodash里面的一个防抖函数

什么是节流？https://www.lodashjs.com/docs/lodash.throttle

在规定时间间隔内不会重复触发回调，只有大于这个时间才会触发，即把频繁触发变为少量触发。注意，它跟防抖不同，它不是触发最后一次，而是冷却一段时间就会执行

应用场景：轮播图

​ 假如我们不想点击一次就触发一次的话，那么我们就可以使用这个函数

button.onclick=_.throttle(()=>{
    console.log('我执行了');
},1000)
//在连续点击的情况下，它要等完这个冷却时间才会触发，处于冷却时间之内的，不会触发回调，跟王者荣耀放技能一样。

巧记：throttle 漂流瓶；流水流入容器一段时间才会满，就触发回调

Vue中使用

import throttle from 'lodash/throttle'
test: throttle(function (index) {
    this.curIndex = index
}, 50),