函数防抖(debounce)

函数防抖是指在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

例如我们需要做一个实时查询的输入框,需要在用户停止输入就发送请求.当用户输入时会清除上一个还未执行的setTimeout,然后创建一个新的
setTimeout,这样如果用户一直输入的话,就不会执行fn函数

const debounce = (fn, interval = 300) => {
  let timer = null ;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, interval);
  }
}

函数节流(throttle)

函数节流是指规定一个时间，在这个时间内，只能有一次触发事件的回调函数执行，
如果在同一个时间内某事件被触发多次，只有一次能生效。

例如我们需要判断页面是否滚动到底部,一般我们监听window对象的scroll事件,但是这样浏览器滚动时,我们就会不断的执行这个判断逻辑.
然而我们实际上只需要隔一段时间来进行逻辑判断.

const throttle = (fn, interval = 300) => {
    let run = true;
    return function () {
        if (!run)return;  
        run = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            run = true;
        }, interval);
    };
}

Tags：前端防抖

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。