如果一个事件触发的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少触发的频率，同时又不影响实际效果。
比如说搜索框的请求优化，搜索的这个需求基本上随处可见，几乎每个项目都会有搜索。
输入搜索词条需要立即触发搜索请求时，防抖和节流可以将多个请求合并为一个请求
现在利用一小例子简单理解一下防抖和节流
首先需要一个盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {font-size:100px;100%;height:400px;border:4px solid #f00;display:flex;justify-content:center;align-items:center;}
</style>
</head>
<body>
<div class="box"></div>
</body>
简单写一个绑定鼠标事件 当鼠标移动时让num++
var num=0;
var box=document.querySelector('.box');
//DOM0级事件绑定--pc端
//box.onmousemove=debounce(move,2000)
//DOM2级事件绑定
box.addEventListener('mousemove',debounce(move,2000),false)
function move(e) {
num++;
this.innerHTML=num;
}
防抖
简单来说就是防止抖动
当持续触发事件时，debounce 会合并事件且不会去触发事件，当一定时间内没有触发再这个事件时，才真正去触发事件。
防抖主要利用定时器实现
//用定时器实现防抖
function debounce(func,wait) {
var timer=null;
return function() {
//保存当前调用的dom对象
var _this=this;
//保存事件对象
var args=arguments;
clearTimeout(timer)
timer=setTimeout(function() {
func.apply(_this,args)
},wait)
}
}
节流
hrottle（节流），当持续触发事件时，保证隔间时间触发一次事件。
持续触发事件时，throttle 会合并一定时间内的事件，并在该时间结束时真正去触发一次事件。
防抖主要有两种方式实现
第一种：时间戳
//时间戳版本实现节流
function throttle(func,wait) {
//定义初始时间
var oldTime=0;
return function() {
var _this=this;
var args=arguments;
//当前时间戳
var newTime=+new Date();
//判断用当前时间减去旧的时间，如果大于wait指定的时间就会触发
if(newTime-oldTime>wait) {
//执行触发的函数
func.apply(_this,args)
//将旧时间更新
oldTime=newTime;
}
}
第二种：定时器
//时间戳版本实现节流
function throttle(func,wait) {
var timer=null;
return function() {
var _this=this;
var args=arguments;
if(!timer) {
timer=setTimeout(function() {
timer=null;
func.apply(_this,args)
},wait)
}
}
}