面试题 防抖和节流

防抖和节流

  • 前言
  • 防抖
  • 手写防抖
  • 节流
  • 手写节流
  • 防抖和节流的区别

前言

防抖和节流是一个常问的面试题 我也不指名道姓了,不同于某些jsonp 防抖和节流在实际开发者对性能的优化和对用户体验的升级都有作用
所以我们很有必要掌握
话不多说 开始正文

防抖

函数防抖,就是指触发事件后,函数在 n 秒后只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数的执行时间。
简单的说 就是一段时间只执行一次
这样就能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次

举个例子
你打游戏 按b回城需要十秒钟
等你回了城出来 再次回城,或者是被对面打断回城了 还是需要十秒钟

手写防抖

实现防抖,我们要用到定时器
我们每次重复调用一次函数就清除定时器一次 任何重新开始定时 直到 到了设定的时间段也没有调用这个函数
了解了原理和操作步骤 我们开始写吧
首先我们先声明一个函数代表 防抖函数

function debounce(callback,time){
   }

其中calllback代表我们需要的事件的回调函数,
time代表时间

然后声明一个变量代表定时器

let timer ;

然后利用闭包 确保我们声明的变量timer不会被销毁

 return function

你可能感兴趣的:(javascript,前端,面试)