一、防抖
- 使用场景：当input输入框需要在用户输入后实时请求，但是如果请求的时间间隔很短，会造成很多无用的请求，这时就可以用防抖来解决这个问题，即当设置为3s时，若用户输入3s无改变那么就发请求
- 使用方式：<input @change="debounce(fn,3000)">（fn是发起请求的函数）
- 手写思路：下面这张图是我理解比较深刻示意图，我们可以将输入比作一个进度条，当进度条达到100%时即发请求，当用户输入内容有变化的时候进度条再次从0开始计时
-
手写代码
function debounce(fn, delay) { let timer = null return function (){ clearTimeout(timer) timer = setTimeout(() => { fn() timer = null }, delay) }}
二、节流
-
使用场景：如果一件事情被频繁的触发，比如浏览器滚动条的计算，频繁的计算会导致用户体验感极差，页面闪来闪去，所以我们需要在一段时间内只执行一次
-
使用方式：window.addEventListener('scroll', debounce(fn, 1000))（fn是发起请求的函数）
-
手写节流：我们需要在定时器没有结束的时候再次点击不理睬这次改动，那么每次在定时器结束后触发该事件就需要再次定义
-
代码示意：
function debounce(fn, delay) { let timer = null return function (){ clearTimeout(timer) timer = setTimeout(() => { fn() timer = null }, delay) }}
