快捷搜索:

前端面试--什么是防抖和节流

写在前面

话题挑战赛第1期

    活动详情地址: 参赛话题:前端面试宝典 话题描述:欢迎各位加入话题创作得小伙伴,如果我没有猜错得话,我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重,已经成为不可缺少的部分,前端技术也是层出不穷,各种技术类、技术框架也蜂拥而出,前端面试的难度也随之增加,如果我们拥有一套前端面试宝典。如果你是应聘者:你就可以从容的solo面试官,如果你是面试官:你就可以将应聘者拷问到骨子里! 总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此,形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧!!! 创作模板:

题目一

什么是防抖和节流,他们的应用场景有哪些

考点

本道题就是考察我们对防抖和节流的掌握是否熟练,面试官问的就是你是否真的理解防抖和节流,并且要会手写,并且在实战中怎么去使用。我们要考虑的是防抖和节流的定义,并且在实战中如何去应用。

答案

防抖 (debounce)

防抖,顾名思义,防止抖动,以免把一次事件误认为多次,敲键盘就是一个每天都会接触到的防抖操作。

在 JS 中,有哪些防抖的场景呢?

  1. 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖
  2. 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖
  3. 文本编辑器实时保存,当无任何更改操作一秒后进行保存

代码如下:

function debounce(f, wait) {
          
   
  let timer;
  return (...args) => {
          
   
    clearTimeout(timer);
    timer = setTimeout(() => {
          
   
      f(...args);
    }, wait);
  };
}

节流 (throttle)

节流,顾名思义,控制水的流量。控制事件发生的频率,如控制为 1s 发生一次,甚至 1 分钟发生一次。
  1. scroll 事件,每隔一秒计算一次位置信息等
  2. 浏览器播放事件,每个一秒计算一次进度信息等
  3. input 框实时搜索并发送请求展示下拉列表,每隔一秒发送一次请求 (也可做防抖) —>很重要

代码如下:

function throttle(f, wait) {
          
   
  let timer;
  return (...args) => {
          
   
    if (timer) {
          
   
      return;
    }
    timer = setTimeout(() => {
          
   
      f(...args);
      timer = null;
    }, wait);
  };
}

扩展

防抖:代码实现重在清零 clearTimeout 节流:代码实现重在开锁关锁 timer=timeout; timer=null

写在最后

话题挑战赛第1期

    活动详情地址:
经验分享 程序员 职场和发展