JS节流和防抖

节流

节流就是针对调用频率高的函数设置冷却时间,防止过于频繁的调用引起的浏览器性能问题以及ajax调用问题。

const throttle = (fn,time) =>{
 let cooldown = false;
 return (...args) =>{ 
 if (cooldown) return;
 fn.call(undefined,...args);
 cooldown = true;
 setTimeout(()=>{cooldown = false},time);
}
}

//使用方式
const f2 = throttle(()=>console.log(1), 3000) //设置cd为3秒

f2() //第一次调用,打印出1,进入冷却
f2()//第二次在3秒内调用,没有打印出1

防抖

在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。(类似LOL这类游戏里面的回城)

const debounce = (fn,time)=>{
  let timer = null;
  return (...args)=>{
  if (timer) clearTimeout(timer);
    timer = setTimeout(()=>{
      fn.call(undefined,...args);
      timer = null},time)
  }
}

//使用方式
const f2 = debounce(()=>console.log(1), 3000) //设置时间为3秒
f2()//第一次执行
f2()//3秒内第二次执行,在这次之后等待3秒输出 1 
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 函数节流 在一段时间内,只能触发一次函数,如在这段时间内多次触发,也只能执行一次。 举个栗子🌰我们在打王者时,当英...
    浪味仙儿啊阅读 355评论 0 2
  • 事件的触发权很多时候都属于用户,有些情况下会产生问题: 向后台发送数据,用户频繁触发,对服务器造成压力 一些浏览器...
    oWSQo阅读 447评论 0 6
  • 意义: 在进行窗口的 resize、scroll、输入框内容验证、touchmove 等操作时,如果事件处理函数调...
    希染丶阅读 427评论 0 0
  • 1. 概念介绍 debounce: 防抖函数,高频事件触发 在 n 秒内只会执行一次,节流会稀释函数的执行频率; ...
    菜鸡前端阅读 388评论 0 0
  • 本文的主角是节流 throttle 与防抖 debounce。 区别节流强调的是m秒内函数最多触发一次,注意这里的...
    风之化身呀阅读 933评论 0 0

友情链接更多精彩内容