新闻资讯

首页 新闻资讯 弘成IT资讯

面试必问知识(防抖和节流)

2019-12-17 弘成IT
分享到:
  随着前端技术的飞速攀升,我们的工作业务不仅仅只局限于页面布局以及一些简单的代码,为了满足客户的需求,给客户一个更好的体验,我们在前端的性能方面也有了一个质的提升,下面带大家来学习一个前端的性能优化之一:函数的防抖和节流

  一、背景介绍

  在工作中,我们可能碰到这样的问题:

  • 用户在搜索的时候,在不停敲字,如果每敲一个字我们就要调一次接口,接口调用太频繁,给卡住了。

  • 用户在阅读文章的时候,我们需要监听用户滚动到了哪个标题,但是每滚动一下就监听,那样会太过频繁从而占内存,如果再加上其他的业务代码,就卡住了。

  所以,这时候,我们就要用到 防抖与节流 了。

  二、防抖函数(debounce)

  所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

  防抖函数分为非立即执行版和立即执行版。

  非立即执行版:

\
  非立即执行版的意思是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

  说一下需要注意的事情:

  1. Settimeout里面的函数中的this指向的是全局而不是当前的作用域所以我们这里用apply绑定了this的指向

  2. 每次在指令防抖函数的时候 需要先清除已有的定时器

  立即执行版:

\
  立即执行版的意思是触发事件后会立即执行,然后n秒后不触发事件才能继续执行函数的效果。

  在工作的时候我们需要根据不同的场景来决定我们到底需要哪一种,上述的两种方法一般可以满足多数情况下对场景的需求,但我们也可以将他们的两个结合起来实现最终的合体版。

  合体版本:
\
  func代表函数,wait代表延迟执行的秒数,immediate 为true表示立即执行,false表示非立即执行。

  三、节流(throttle)

  所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。对于节流,一般有两种方式可以实现,分别是时间戳版和定时器版。

  时间戳版:

\
  在持续触发事件的过程中,函数会立即执行,并且每 1s 执行一次。

  定时器版:
\
  在持续触发事件的过程中,函数不会立即执行,并且每 1s 执行一次,在停止触发事件后,函数还会再执行一次。

  从上面两个案例中我们可以发现,时间戳版的函数触发是在时间段内开始的时候触发的,而定时器版是在时间段内结束的时候触发的。我们也可以和上面两个一个对他们实现一个合体版

合体版:
\
 
  func表示函数,wait表示延迟执行的秒数,type 1 表示时间戳版本,2表示定时器版本

  四、总结

  我们来回顾一下我们做了什么:

  我们在工作中碰到一些问题,这些问题会卡住页面,于是我们查资料,想要减少游览器的开销,我们就要用到函数的防抖与节流。

  我们分别用多种办法实现防抖节流函数并对他们进行了合并

  但是如果我们去面试的话仅仅会这些是不足以打动面试官的,下篇文章再带大家深入了解函数的防抖的节流的机制。相信面试官问起来的时候,小伙伴们就可以侃侃而谈了,而不会被问的体无完肤了!

  最后祝小伙伴们早日找到合适的工作!!!!
弘成IT版权与免责声明
1、凡本网站注明稿件来源为:弘成IT的所有文字、图片和音视频稿件,版权均属本网站所有,任何媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发表。已经本网协议授权的媒体、网站,在下载使用时必须注明“稿件来源:弘成IT”,违者本网将依法追究责任。
2、本网注明稿件来源为其他媒体的文/图等稿件均为转载稿,本网转载出于非商业性的教育和科研之目的,并不意味着赞同其观点或证实其内容的真实性。如转载稿涉及版权等问题,请作者在两周内速来电或来函联系。