JavaScript系列-节流

125 阅读2分钟

面试了许多求职者,很多求职者只知其然,而不知所以然,写此文章为广大前端小伙伴指引迷津。纯干货!纯干货!纯干货!

目录

节流

什么是节流?

答:短时间大量触发事件,只会按照一定的频率去触发。

节流的作用?

答:防止事件触发频繁,影响性能。

节流的实现原理?

答:判断是否到达一定时间来触发函数。

节流的使用场景?

答:无限滚动页面。

节流的缺陷?

答:大量使用会导致内存泄漏

节流的笔试题?
手写节流函数。思路:在规定时间内只触发一次

// 定时器版本
function throttle (fn, delay) {
  var run  = true
  return function () {
    if (!run) return 
    let _this = this, args = arguments
    setTimeout (() => {
      fn.apply(_this, args)
      run = false
    }, delay)
  }
}

// 时间戳版本
function throttle(fn, wait) {
  let previous = 0
  return function () {
    let now = Date.now(), self = this, ags = arguments
    if (now - previous > wait) {
      fn.apply(self, ags)
      previous = now
    }
  }
}
面试大白话

答:首先,节流短时间大量触发事件,只会按照一定的频率去触发。其主要目的也是为了防止事件触发频繁,影响性能。它的原理就是判断是否到达一定时间来触发函数。我们项目里面一般就是无限滚动页面触发相应事件。不过节流用的太多,会导致内存泄漏。

小白也是新手面试官,欢迎领导莅临指导工作,提出建议,小白不胜感激,不喜勿喷,点赞收藏随机送程序媛小姐姐一枚哦!!!