一.什么是防抖？
定义：高频事件触发后n秒内只执行一次，如果需要重复执行，则需要重新计算。
实现思路:在每次事件触发之前取消上一次的延时调用方法
function debounce(fn) {
let timeout = null;
return function () {
clearTimeout(timeout);
timeout = setTimeout(()=>{
fn.apply(this,arguments)
},500)
}
}
function sayHi() {
console.log('hi ');
}
var inp = document.getElementById('fangdou');
inp.addEventListener('click',debounce(sayHi))
二.什么是节流？
定义：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
实现思路：每次触发事件之前判断是否 有延时函数
function tthrolte(fn) {
let canreturn = true;
return function () {
if(!canreturn) return
canreturn = false
setTimeout(()=>{
fn.apply(this,arguments)
canreturn = true
},500)
}
}
function sayHi() {
console.log('hi ');
}
var inp = document.getElementById('fangdou');
inp.addEventListener('click',tthrolte(sayHi))
三.使用场景
防抖：滚动事件，表单验证
节流：调整屏幕大小
四.区别
防抖：将多次执行的函数，放在最后执行
节流：将多次执行的函数，分多次执行，每隔一段时间执行一次
参考文章：https://www.jianshu.com/p/a3114ec86539
