为啥要使用防抖和节流
在触发mousemove、scroll等事件时,会不断的调用绑定在事件上面的回调函数,极大的限制了前端性能;因此我们要防止资源被过渡浪费和恶意点击,我们需要对此类事件进行减少调用次数,因此会用防抖和节流的方式来减少频率。
防抖的定义:在固定时间内,事件只允许被发生一次
简单的防抖函数
当input框输入时,结果会实时查询,也就是当用户每输入一个字符,函数就会被调用一次,如果当用户手速过快时或恶意输入时,会有n个请求,此时数据就会发生抖动。
若我们将在一定的事件内,把input框输入事件合并成为一个,执行的请求会根据设定的时间而发出一次请求,即将这段时间的所有操作只执行一次。
节流的定义:把一定时间内的多个事件合为一个执行
简单的节流函数
当鼠标在盒子内移动时,会不停的执行回调函数,就会输出发送请求,所以我们需要处理让鼠标移动时数据不要立刻发送请求
同样,我们需要一个函数在连续操作中按照一定时间间隔只会执行一次回调函数,在频率较高的事件中来节省性能