Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

第 3 题:什么是防抖和节流?有什么区别?如何实现? #5

Open
KouYidong opened this issue Jan 23, 2019 · 57 comments

Comments

@KouYidong
Copy link

commented Jan 23, 2019

  1. 防抖

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间

  • 思路:

每次触发事件时都取消之前的延时调用方法

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
          fn.apply(this, arguments);
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖
  1. 节流

高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率

  • 思路:

每次触发事件时都判断当前是否有等待执行的延时函数

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true,不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false,在开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

@yygmind yygmind changed the title 节流和防抖的个人见解 第三题:节流和防抖的个人见解 Feb 12, 2019

@Carrie999

This comment has been minimized.

Copy link

commented Feb 14, 2019

请问,为什么要 fn.apply(this, arguments);而不是这样 fn()

@barbara012

This comment has been minimized.

Copy link

commented Feb 18, 2019

@Carrie999 关键在第一个参数,为了确保上下文环境为当前的this,所以不能直接用fn。

@MinosIE

This comment has been minimized.

Copy link

commented Feb 18, 2019

@Carrie999 call 和 apply 可以了解一下

@yangtao2o

This comment has been minimized.

Copy link

commented Feb 18, 2019

之前有看过一步步实现的文章,如下:

@zhongtingbing

This comment has been minimized.

Copy link

commented Feb 18, 2019

@Carrie999 关键在第一个参数,为了确保上下文环境为当前的this,所以不能直接用fn。

请问为甚么你要确保fn执行的上下文是this?在这个箭头函数里this又是指向的谁?

@lilywang711

This comment has been minimized.

Copy link

commented Feb 18, 2019

@zhongtingbing
加上 apply 确保 在 sayHi 函数里的 this 指向的是 input对象(不然就指向 window 了,不是我们想要的)。
这里的箭头函数依旧是指向 input 对象。

@lilywang711

This comment has been minimized.

Copy link

commented Feb 18, 2019

@zhongtingbing 你去试试在 不加 apply 时去 sayHi 函数里打印下 this看看什么

是指向window的。因为 sayHi 函数定义在全局中,所以调用时里面this指向window,
所以才需要加上 apply,显示绑定 this 值(input对象)到 sayH 函数里面去

@yishuihan-001

This comment has been minimized.

Copy link

commented Feb 19, 2019

请问,为什么要 fn.apply(this, arguments);而不是这样 fn()

@Carrie999 为了保证sayHi执行时的this指向input

@Crazy404

This comment has been minimized.

Copy link

commented Feb 19, 2019

请问防抖那里可以写成
setTimeout(fn.bind(this), 500)
吗(小白的疑问)

@Mathround

This comment has been minimized.

Copy link

commented Feb 20, 2019

请问,为什么要 fn.apply(this, arguments);而不是这样 fn()

估计是改变this指向

@fan-2

This comment has been minimized.

Copy link

commented Feb 20, 2019

image
image
image

@ShadowWalker627

This comment has been minimized.

Copy link

commented Feb 20, 2019

@zhongtingbing 你去试试在 不加 apply 时去 sayHi 函数里打印下 this看看什么

是指向window的。因为 sayHi 函数定义在全局中,所以调用时里面this指向window,
所以才需要加上 apply,显示绑定 this 值(input对象)到 sayH 函数里面去

这里用了apply确实使得this指向了input对象;对于“因为 sayHi 函数定义在全局中,所以调用时里面this指向window”,测试了一下直接使用fn(arguments)的话,在sayHi中打印this为undefined;js中this是在运行时绑定的,而不是定义时绑定的

@Liubasara

This comment has been minimized.

Copy link

commented Feb 21, 2019

有个问题,假如传入的方法是异步的,上述的节流方法是没用的啊,考虑把fn.apply(this, arguments)这一句放在setTimeout外面是不是会好一点?就像下面这样。

const myThrottle2 = function (func, wait = 50) {
  var canRun = true
  return function (...args) {
    if (!canRun) {
      return
    } else {
      canRun = false
      func.apply(this, args) // 将方法放在外面, 这样即便该函数是异步的,也可以保证在下一句之前执行
      setTimeout(function () {canRun = true}, wait)
    }
  }
}
@lilywang711

This comment has been minimized.

Copy link

commented Feb 22, 2019

@zhongtingbing 你去试试在 不加 apply 时去 sayHi 函数里打印下 this看看什么
是指向window的。因为 sayHi 函数定义在全局中,所以调用时里面this指向window,
所以才需要加上 apply,显示绑定 this 值(input对象)到 sayH 函数里面去

这里用了apply确实使得this指向了input对象;对于“因为 sayHi 函数定义在全局中,所以调用时里面this指向window”,测试了一下直接使用fn(arguments)的话,在sayHi中打印this为undefined;js中this是在运行时绑定的,而不是定义时绑定的

@Liubasara 是的,应该改为「因为 sayHi 函数是在全局中运行,所以this指向了window」,不过你说的「测试了一下直接使用fn(arguments)的话,在sayHi中打印this为undefined」是不对的哦,不显示绑定,是这里是指向window的。截图如下:
image

@KiraYo4kage

This comment has been minimized.

Copy link

commented Feb 26, 2019

请问,为什么要 fn.apply(this, arguments);而不是这样 fn()

楼上大佬说的是对的,但是要注意这里的this(input)是addEventListener中调用回调的时候传进来的,这和是不是箭头函数没关系。
另外,因为不确定入参的数量,所以利用apply还可以传入扩展后的arguments(如果不兼容...arguments语法的话)。
已上。

@mochen666

This comment has been minimized.

Copy link

commented Feb 27, 2019

@KouYidong 节流函数有点问题,第一次应该是立即执行,而不是delay 500ms后再执行

@XMoonLights

This comment has been minimized.

Copy link

commented Mar 4, 2019

canRun和timeout的定义应该放到方法外,不然延时到了还是会执行多次

@sunnyxuebuhui

This comment has been minimized.

Copy link

commented Mar 7, 2019

请问,为什么要 fn.apply(this, arguments);而不是这样 fn()

注意this指向问题。

@roberthuang123

This comment has been minimized.

Copy link

commented Mar 7, 2019

如果单单为了打印那句console.log('防抖成功');确实可以直接fn(),但我们得考虑实际情况,让sayHi的this指向input是必要的,例如我们需要在输入完改变字体颜色,如下:
function sayHi() { console.log('防抖成功'); this.style.color = 'red'; }
这个时候fn.apply(this, arguments);的作用就显而易见了

@MiaLeung01

This comment has been minimized.

Copy link

commented Mar 13, 2019

防抖:动作绑定事件,动作发生后一定时间后触发事件,在这段时间内,如果该动作又发生,则重新等待一定时间再触发事件。

  function debounce(func, time) {
    let timer = null;
    return () => {
      clearTimeout(timer);
      timer = setTimeout(()=> {
        func.apply(this, arguments)
      }, time);
    }
  }

节流: 动作绑定事件,动作发生后一段时间后触发事件,在这段时间内,如果动作又发生,则无视该动作,直到事件执行完后,才能重新触发。

  function throtte(func, time){
    let activeTime = 0;
    return () => {
      const current = Date.now();
      if(current - activeTime > time) {
        func.apply(this, arguments);
        activeTime = Date.now();
      }
    }
  }
@thinkfish

This comment has been minimized.

Copy link

commented Mar 14, 2019

请问,为什么要 fn.apply(this, arguments);而不是这样 fn()

如果demo一中的sayHi()方法其实,没有什么区别
但是如果sayHi这个callback要改变this的指向,或者要更方便的传参的话用apply就比较方便
用call或bind也可以

这里引申的话会有俩经常会聊到的问题
1,call,apply,bind的区别
2,this的指向
这俩应该是面试必聊的问题,可以好好整理一下。博主的这个面试题的系列中这俩都有说到。

@Marze1994

This comment has been minimized.

Copy link

commented Mar 20, 2019

@zhongtingbing 你去试试在 不加 apply 时去 sayHi 函数里打印下 this看看什么

是指向window的。因为 sayHi 函数定义在全局中,所以调用时里面this指向window,
所以才需要加上 apply,显示绑定 this 值(input对象)到 sayH 函数里面去

不加apply,sayHi里面this肯定是指向window的,但是加上apply后,fn.apply(this, arguments)这段代码里面的this的指向就要分情况讨论了,而且这个this就是sayHi里面的this。这里的情况其实指的就是setTimeout里面的回调函数是普通函数还是箭头函数。如果是箭头函数,则这里的this最终指向的是input对象,如果为普通函数,this则指向window。setTimeout关于this的问题 | MDN箭头函数 | MDN

  1. 箭头函数表现

箭头函数表现

2. 普通函数表现

普通函数表现

3. 解决办法

解决办法

@xuxb

This comment has been minimized.

Copy link

commented Mar 26, 2019

这里似乎有个问题,就是如果使用定时器的话,在 500ms 后执行的始终是前 500ms 内触发的第一个函数 fn,之后的在 500ms 内触发函数都将被丢弃,这样的话,fn 里获取的参数 arguments 可能不准确。应该以 500ms 内触发的最后一个函数为准,而不是第一个函数。

@XDfield

This comment has been minimized.

Copy link

commented Mar 29, 2019

防抖添加个 immediate 参数,控制直接触发还是最后触发

export function debounce(func: , wait = 500, immediate = true) {
  let timeout, context, args;
  const later = () => setTimeout(() => {
    timeout = null;
    if (!immediate) {
      func.apply(context, args)
    }
    context = args = null;
  }, wait)

  return function(this, ...params) {
    context = this;
    args = params;
    if (timeout) {
      clearTimeout(timeout);
      timeout = later();
    } else {
      timeout = later();
      if (immediate) {
        func.apply(context, args);
      }
    }
  }
}
@Jingce-lu

This comment has been minimized.

Copy link

commented Mar 30, 2019

防抖:

当一次事件发生后,事件处理器要等一定阈值的时间,如果这段时间过去后 再也没有 事件发生,就处理最后一次发生的事件。假设还差 0.01 秒就到达指定时间,这时又来了一个事件,那么之前的等待作废,需要重新再等待指定时间。

function debounce(fn, wait = 50, immediate) {
  let timer;
  return () => {
    if (immediate) {
      fn.apply(this, arguments)
    }
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, wait)
  }
}
@asd8855

This comment has been minimized.

Copy link

commented Apr 12, 2019

在掘金上看到的,感觉不错 https://juejin.im/entry/58c0379e44d9040068dc952f

@hytStart

This comment has been minimized.

Copy link

commented Apr 12, 2019

防抖 :

const deb = (fn, delay, immediate) => {
	let timer = null
	return function() {	
		const context = this
		timer && clearTimeout(timer)
		if (immediate) {
			!timer && fn.apply(context, arguments)
		}
		timer = setTimeout(() => {
                       fn.apply(context, arguments)
                }, delay)
	}
}

节流

const throttle = (fn, delay = 2000) => {
	let timer = null
	let startTime = new Date()
	return function() {
		const context = this
		let currentTime = new Date()
		clearTimeout(timer)
		if (currentTime - startTime >= delay) {
			fn.apply(context, arguments)
			startTime = currentTime
		} else {
			//让方法在脱离事件后也能执行一次
			timer = setTimeout(() => {
				fn.apply(context, arguments)
			}, delay)
		}
	}
}
@gzwgq222

This comment has been minimized.

Copy link

commented Apr 14, 2019

@Liubasara

setTimeout(async () => {
   await fn.apply(this, arguments)
   canRun = true
}, time)

异步情况下这样应该就好了

@LiuMengzhou

This comment has been minimized.

Copy link

commented May 16, 2019

/**
 * Difference between debounce and throttle
 * In summary, 
 * throttle says, “Hey, we heard you the first time, but if you want to keep going, no problem. 
 * We’ll just ignore you for a while.” 
 * Debounce says, “Looks like you’re still busy. No problem, 
 * we’ll wait for you to finish!”
 */
/**
 * 快速书写一个防抖函数
 * @description 只要一直调用, callback 将不会被触发
 * 在一次调用结束后, 只有等待 timeout ms 时间, 才能继续调用 callback
 * immediate 决定触发时机
 * @example 
 * 1. 点击按钮发送请求(保存数据之类的)
 * 2. 搜索时自动联想
 * 3. 自动保存
 * 4. Debouncing a resize/scroll event handler
 */
function debounce(callback, timeout, immediate) {
  let timer;
  return function () {
    const context = this; // 持有执行上下文
    const args = arguments; // 记录传参
    const later = function () {
      timer = null; // 贤者时间过了,重振旗鼓,重置为初始状态
      if (!immediate) callback.apply(context, args); // 设置为尾部调用才延时触发
    }
    const callNow = immediate && !timer; // 如果确认允许首部调用,且首次调用,那么本次立即触发
    clearTimeout(timer); // 杀掉上次的计时器,重新计时
    timer = setTimeout(later, timeout); // 重启一个计时器,过了贤者时间之后才触发
    callNow && callback.apply(context, args); // 设置为首部调用立即触发
  }
}

/**
 *  快速书写一个节流函数
 * @description 一直调用 callback, 每隔 timeout ms 时间 callback 触发一次
 * 在 timeout ms 时间内的调用将不触发
 * @example
 * 1. Throttling a button click so we can’t spam click 控制疯狂按钮的响应频率
 * 2. Throttling an API call 控制 API 的调用频率
 * 3. Throttling a mousemove/touchmove event handler 控制频繁触发事件的相应频率
 */
// solution1 记录时间比较
function throttle(callback, timeout) {
  let triggerTime; // 记录每次真正触发时间
  return function () {
    const context = this; // 持有执行上下文
    const args = arguments; // 记录传参
    if (triggerTime === undefined // 首次调用
      || Date.now() - triggerTime > timeout) { // 贤者时间已经过去
      triggerTime = Date.now(); // 记录真正触发时间
      callback.apply(context, args); // 可以触发回调
    }
  }
}
// solution2 间隔时间反转标志位
function throttle(callback, timeout) {
  let disable; // 触发回调是否禁用
  return function () {
    const context = this; // 持有执行上下文
    const args = arguments; // 记录传参
    if (!disable) { // 首次调用或者贤者时间过了,禁用解除
      callback.apply(context, args); // 可以触发回调
      disable = true; // 马上禁用
      setTimeout(_ => disable = false, timeout); // 贤者时间过了,禁用解除
    }
  }
}
@GpingFeng

This comment has been minimized.

Copy link

commented Jul 9, 2019

函数节流

概念

在 n 秒中只执行一次

实现原理

通过 setTimeout 执行

代码实现

// 初步实现
const throttle = function (fn, time) {
  let canRun = true
  // 闭包
  return () => {
    if (canRun) {
      canRun = false
      setTimeout(() => {
        canRun = true
        fn()
      }, time)
    }
  }
}

function sayThrottle() {
  console.log('我是节流,我在固定的时间内执行一次')
}
window.onscroll = throttle(sayThrottle, 1000)

函数防抖

概念

在 n 秒内重新触发,会重新开始计算时间

实现原理

通过 setTimeout 和 clearTimeout 实现

代码实现

function debounce (fn, time) {
  let timer = null
  // 闭包
  return () => {
    // 每次都会重新开始计算时间
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn()
    }, time)
  }
}

function sayDebounce() {
  console.log('我是防抖,每次触发我都会重新计算一次时间')
}

btn.onclick = debounce(sayDebounce, 1000);
@bayunteng

This comment has been minimized.

Copy link

commented Jul 10, 2019

@Carrie999 关键在第一个参数,为了确保上下文环境为当前的this,所以不能直接用fn。

他这个已经用了箭头函数了,直接fn.apply();也是可以的吧

@MoxTY

This comment has been minimized.

Copy link

commented Jul 11, 2019

请问,为什么要 fn.apply(this, arguments);而不是这样 fn()
我觉得你应该了解一下什么是apply和call

@quxian

This comment has been minimized.

Copy link

commented Jul 11, 2019

// 防抖
const debounce = (fun, wait) => {
    let handle;
    return (...args) => {
        clearTimeout(handle);
        handle = setTimeout(() => fun(...args), wait);
    }
}

// 节流
const throttle = (fun, wait) => {
    let isRuning = false;
    return (...args) => {
        if (!isRuning) {
            isRuning = true;
            setTimeout(() => isRuning = false, wait)
            fun(...args);
        }
    }
}

// eg.
const fun1 = debounce(f1 => console.log(f1), 300);
const fun2 = throttle(f2 => console.log(f2), 300);
@wqcstrong

This comment has been minimized.

Copy link

commented Jul 12, 2019

请问,为什么要 fn.apply(this, arguments);而不是这样 fn()

@Carrie999 渐渐的改变已有的认知,完整的函数调用应该是前者:

函数名.apply(当前上下文, [ 参数1, 参数2, .... ])

后者可以理解成是方便撰写的"糖", 改变过来后,对this指向的问题的理解也有很大的帮助。

@NuoHui

This comment has been minimized.

Copy link

commented Jul 13, 2019

节流函数

// 基础版本: 基于时间实现节流函数
function throttle(fx, delay = 300) {
    let pre = Date.now();
    return (...args) => {
      let cur = Date.now();
      console.log(cur - pre)
      if(cur - pre >= delay) {
        fx.apply(this, args);
        pre = Date.now();
      }
    }
  }

// 基础版本: 基于定时器实现节流函数
function throttle(fx, delay = 300) {
    let time = null;
    return (...args) => {
      if(!time) {
        time = setTimeout(() => {
          fx.apply(this, args);
          time = null;
        }, delay);
      }
    }
  }

// 基于定时器+时间实现节流函数, 第一次触发, 后面每delay周期执行一次, 最后一次触发执行
  function throttle(fx, delay = 300) {
    let pre, time;
    return (...args) => {
      const now = Date.now();
      if (pre && now < delay + pre) {
        // 处于delay期间内
        clearTimeout(time);
        time = setTimeout(() => {
          pre = now;
          fx.apply(this, args);
          console.log('最后一次执行');
        }, delay);
      } else {
        pre = now;
        // 第一次执行
         // delay周期执行一次
        fx.apply(this, args);
      }
    };
  }

防抖函数

function debounce(fx, delay = 300) {
    let time = null;
    return (...args) => {
      if (time) {
        clearTimeout(time);
      }
      time = setTimeout(() => {
        fx.apply(this, args);
      }, delay);
    };
  }
@cnlinge

This comment has been minimized.

Copy link

commented Jul 14, 2019

可以看这里, 讲解的比较细, 也可以直接看lodash的源码
https://yuchengkai.cn/docs/frontend/#%E9%98%B2%E6%8A%96

函数节流

概念

在 n 秒中只执行一次

实现原理

通过 setTimeout 执行

代码实现

// 初步实现
const throttle = function (fn, time) {
  let canRun = true
  // 闭包
  return () => {
    if (canRun) {
      canRun = false
      setTimeout(() => {
        canRun = true
        fn()
      }, time)
    }
  }
}

function sayThrottle() {
  console.log('我是节流,我在固定的时间内执行一次')
}
window.onscroll = throttle(sayThrottle, 1000)

函数防抖

概念

在 n 秒内重新触发,会重新开始计算时间

实现原理

通过 setTimeout 和 clearTimeout 实现

代码实现

function debounce (fn, time) {
  let timer = null
  // 闭包
  return () => {
    // 每次都会重新开始计算时间
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn()
    }, time)
  }
}

function sayDebounce() {
  console.log('我是防抖,每次触发我都会重新计算一次时间')
}

btn.onclick = debounce(sayDebounce, 1000);

我想给sayDebounce方法传递额外的参数,再调用的时候应该怎么写?

@leslieSie

This comment has been minimized.

Copy link

commented Jul 15, 2019

请问,为什么要 fn.apply(this, arguments);而不是这样 fn()

因为调用的时候要接收传入的参数,arguments就是用于接收上一级的参数的this相当于占位符,在这里可以使用Null来代替

@wzpxx

This comment has been minimized.

Copy link

commented Jul 15, 2019

防抖:上个定时器还没执行完,就清除新产生的定时器。
节流:规定时间内,只产生和执行一个定时器。

@fikyair

This comment has been minimized.

Copy link

commented Jul 16, 2019

防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。

@caixianglin

This comment has been minimized.

Copy link

commented Jul 16, 2019

也贡献一个ts版本

/**
 * [throttle 时间戳+定时器 节流函数]
 * @param  {[type]} func:   any           [description]
 * @param  {[type]} delay?: number        [毫秒时间]
 * @return {[type]}         [description]
 */
export function throttle(this: any, func: any, delay = 0): any {
    let timer
    let startTime = Date.now()
    return args => {
        let remainTime = delay - (Date.now() - startTime)
        if (remainTime <= 0) {
            func.apply(this, args)
            startTime = Date.now()
        } else {
            timer && clearTimeout(timer)
            timer = setTimeout(func, remainTime)
        }
    }
}
@mrh960125

This comment has been minimized.

Copy link

commented Jul 17, 2019

例子中的函数调用写在了箭头函数中,箭头函数中的this在函数定义时就决定了,所以使用call或者apply时的this就是最后return出来的函数中的this , return出来的匿名函数为普通函数它的this由调用者决定,所以最后this会指向最终的调用者input

@lishu97

This comment has been minimized.

Copy link

commented Jul 20, 2019

请问防抖那里可以写成
setTimeout(fn.bind(this), 500)
吗(小白的疑问)

不能,那样写虽然看起来更简洁,但是arguments传不进去了

@soneway

This comment has been minimized.

Copy link

commented Jul 25, 2019

/**
 * 节流(被调用n次,只在time间隔时间点运行)
 * @param fn 回调函数
 * @param time 延时
 */
function throttle (fn, time = 300) {
  if (fn.pending) {
    return;
  }

  fn();
  fn.pending = true;

  setTimeout(() => {
    fn.pending = false;
  }, time);
}

/**
 * 防抖(被调用n次,只运行一次)
 * @param fn 回调函数
 * @param time 延时
 */
function debounce (fn, time = 300) {
  clearTimeout(fn.tid);
  fn.tid = setTimeout(fn, time);
}

我的写法

@qhh001

This comment has been minimized.

Copy link

commented Jul 27, 2019

防抖是不是就是高频事件的回调函数的执行时间,确保回调函数n秒之内只执行一次。节流是不是就是高频事件在n秒内只执行一次。控制高频事件的执行次数。--个人愚见

@justable

This comment has been minimized.

Copy link

commented Jul 29, 2019

function debounce(callback, timeout, immediate) {
  let timer;
  return function () {
    const context = this; // 持有执行上下文
    const args = arguments; // 记录传参
    const later = function () {
      timer = null; // 贤者时间过了,重振旗鼓,重置为初始状态
      if (!immediate) callback.apply(context, args); // 设置为尾部调用才延时触发
    }
    const callNow = immediate && !timer; // 如果确认允许首部调用,且首次调用,那么本次立即触发
    clearTimeout(timer); // 杀掉上次的计时器,重新计时
    timer = setTimeout(later, timeout); // 重启一个计时器,过了贤者时间之后才触发
    callNow && callback.apply(context, args); // 设置为首部调用立即触发
  }
}

请问immediate=true时的防抖和节流有什么区别 @LiuMengzhou

@lhban108

This comment has been minimized.

Copy link

commented Jul 30, 2019

哪有那么复杂?
简而言之:
节流:高频触发的事件,在指定的单位时间内,只响应第一次
防抖:高频触发的事件,在指定的单位时间内,只响应最后一次,如果在指定时间再次触发,则重新计算时间.

节流的栗子:

 function throttle (fn, delay) {
   let lastTime = 0;  // 上次触发的时间
   return function () {
     let now = Date.now();
     if (now - lastTime > delay) {
       fn.call(this);
       lastTime = now; // update时间
     }
   }
 }


// 调用
 
 document.onscroll = throttle(function () {
   console.log('- throttle - ')
 }, 1000)
 
 防抖的栗子:
 // 定义
 function debounce (fn, delay) {
   let timer = null ; // 上次的计数器
   return function () {
     clearTimeout(timer)
     timer = setTimeout(function () {
       fn.call(this)
     }, delay)
   }
 }
 
 // 调用
 document.querySelector('.butn').onclick = debounce(function () {
   console.log('- debounce -')
 }, 1000)

@Mr-jiangzhiguo

This comment has been minimized.

Copy link

commented Jul 30, 2019

给你们一个可以装饰class内 箭头函数的 debounce 封装

example:

class A {
  @debounce_next({delay: 400})
  scrolling = ()=>{
    console.log('hahah')
  }
}
/**
 * @description 防抖动:(decorator)可装饰类内箭头函数
 * @param {object} params - 配置
 * @param {number} params.delay - 时间阀值(单位:ms),默认:delay=300
 * @param {bool} params.immediate - 初始是否立刻执行,默认:immediate=false
 * @returns {function} - 返回装饰器方法
 */
export const debounce_next = (params = {}) => {
  // reference:http://es6.ruanyifeng.com/#docs/decorator#%E6%96%B9%E6%B3%95%E7%9A%84%E4%BF%AE%E9%A5%B0
  return function(target, name, descriptor) {
    let timer = null;
    const { delay = 300, immediate = false } = params;

    // high order function
    if (!descriptor || (arguments.length === 1 && typeof target === 'function')) {
      return createDebounce(target);
    }

    function createDebounce(fn) {
      return function debounce() {
        if (immediate && !timer) {
          fn.apply(this, arguments);
        }
        if (timer) {
          clearTimeout(timer);
        }

        let argumentsCopy = arguments;
        let that = this;

        timer = setTimeout(function() {
          if (!immediate) {
            fn.apply(that, argumentsCopy);
          }
          timer = null;
        }, delay);
      };
    }

    // 修饰类内的箭头函数
    if (descriptor.initializer) {
      return {
        enumerable: false,
        configurable: true,
        get: function() {
          return createDebounce(descriptor.initializer.call(this));
        },
      };
    }

    return descriptor;
  };
};
@wsq815

This comment has been minimized.

Copy link

commented Jul 31, 2019

请问,为什么要 fn.apply(this, arguments);而不是这样 fn()

因为要绑定fn的this指向,在setTimeout里面执行的函数都会在全局作用域执行所以this会指向window,但是fn执行时this指向的上下文环境应该是当前执行的函数,所以要用apply来绑定fn的this指定到当前

@Advanced-Frontend Advanced-Frontend deleted a comment from zwmmm Aug 3, 2019

@coderunner-xinxin coderunner-xinxin referenced this issue Aug 8, 2019

Open

小目标 #2

3 of 10 tasks complete
@Carson126

This comment has been minimized.

Copy link

commented Aug 9, 2019

请问防抖那里可以写成
setTimeout(fn.bind(this), 500)
吗(小白的疑问)

你argument怎么解决?

@quxian

This comment has been minimized.

Copy link

commented Aug 16, 2019

基于事件的,感觉更优雅。

const debounce = (eventTarget, eventName, wait) => {
    let handle;
    let event = new Event(eventName);
    return (detail) => {
        event.detail = detail;
        clearTimeout(handle);
        handle = setTimeout(() => eventTarget.dispatchEvent(event), wait);
    }
}

const throttle = (eventTarget, eventName, wait) => {
    let isRuning = false;
    let event = new Event(eventName);
    return (detail) => {
        if(isRuning) return;
        isRuning = true;
        setTimeout(() => isRuning = false, wait);
        event.detail = detail;
        eventTarget.dispatchEvent(event);
    }
}

let target = window;

target.addEventListener('resize', debounce(target, 'myonresizedebounce', 3000))

target.addEventListener('myonresizedebounce', (event) => {
    console.log({name: 'myonresizedebounce', event});
})

target.addEventListener('resize', throttle(target, 'myonresizethrottle', 1000))

target.addEventListener('myonresizethrottle', (event) => {
    console.log({name: 'myonresizethrottle', event});
})
@pekonchan

This comment has been minimized.

Copy link

commented Aug 17, 2019

不能简单掌握基础的就够了。面试要有亮点。不然基础的知识大家都回答了,面试官只能找有特色的了。

可以看看这个
别只掌握基础的防抖和节流了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.