函数防抖(debounce)
函数防抖是指在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
例如我们需要做一个实时查询的输入框,需要在用户停止输入就发送请求.当用户输入时会清除上一个还未执行的setTimeout,然后创建一个新的
setTimeout,这样如果用户一直输入的话,就不会执行fn函数
实现
1 | const debounce = (fn, interval = 300) => {
|
2 | let timer = null ;
|
3 | return function() {
|
4 | clearTimeout(timer);
|
5 | timer = setTimeout(() => {
|
6 | fn.apply(this, arguments);
|
7 | }, interval);
|
8 | }
|
9 | }
|
示例
1 | <input type="text" id="input">
|
1 | var input = document.getElementById('input')
|
2 | const debounce = (fn, interval = 300) => {
|
3 | let timer = null;
|
4 | return function () {
|
5 | clearTimeout(timer);
|
6 | timer = setTimeout(() => {
|
7 | fn.apply(this, arguments);
|
8 | }, interval);
|
9 | }
|
10 | }
|
11 | function handleInput(e) {
|
12 | console.log(e);
|
13 | }
|
14 | input.addEventListener('keyup', debounce((e)=>handleInput(e)))
|
函数节流(throttle)
函数节流是指规定一个时间，在这个时间内，只能有一次触发事件的回调函数执行，
如果在同一个时间内某事件被触发多次，只有一次能生效。
例如我们需要判断页面是否滚动到底部,一般我们监听window对象的scroll事件,但是这样浏览器滚动时,我们就会不断的执行这个判断逻辑.
然而我们实际上只需要隔一段时间来进行逻辑判断.
实现
1 | const throttle = (fn, interval = 300) => {
|
2 | let run = true;
|
3 | return function () {
|
4 | if (!run) return;
|
5 | run = false;
|
6 | setTimeout(() => {
|
7 | fn.apply(this, arguments);
|
8 | run = true;
|
9 | }, interval);
|
10 | };
|
11 | }
|