节流和防抖

111 阅读1分钟

节流:倒计时执行某事件,倒计时过程中如果再次请求执行该事件,也不会执行 生活化理解:游戏中的技能冷却时间,也就是技能CD,用一次后,过若干秒才能用下一次 使用场景:高频点击、表单重复提交

  • 在用户滚动页面时,可以使用节流来避免频繁地触发函数。
  • 在监听窗口大小改变时,可以使用节流来避免频繁地调整布局。
  • 在监听鼠标移动时,可以使用节流来避免频繁地触发事件。 代码实现: 1、通过保存一个标记 let loading= true 2、在函数开头判断 标志 是否为 true,不为 true 则中断函数 3、将 标记 设置为 false,防止执行之前再被执行 4、执行完事件之后,重新将这个标志设置为 true

防抖:倒计时执行某事件,倒计时过程中如果再次请求执行该事件,清除上一次的倒计时,再次重新倒计时 理解:延迟执行、一直操作触发事件并且不执行,只有当停止操作后等才会执行 应用场景

  • 在用户输入搜索关键词时,可以使用防抖来避免频繁地向服务器发送请求。 代码实现: 1、创建一个标记用来存放定时器的返回值 let timer=null 2、每次当用户点击/输入的时候,把前一个定时器清除 3、然后创建一个新的 setTimeout,这样就能保证点击按钮后的 interval 间隔内,如果用户还点击了的话,就不会执行 fn 函数