如何在面试中手写出javascript节流和防抖函数


Posted in Javascript onOctober 22, 2020

面试的时候我们经常会问别人是理解什么是节流和防抖,严格的可能要求你写出节流和防抖函数,这里我们抛开loadsh工具库手写节流和防抖

1.节流函数throttle

// 节流方案1,每delay的时间执行一次,通过开关控制
function throttle(fn, delay, ctx) {
  let isAvail = true
  return function () {
    let args = arguments // 开关打开时,执行任务 
    if (isAvail) {
      fn.apply(ctx, args)
      isAvail = false // delay时间之后,任务开关打开 
      setTimeout(function () { isAvail = true }, delay)
    }
  }
}
// 节流方案2,通过计算开始和结束时间
function throttle(fn,delay){
      // 记录上一次函数出发的时间
      var lastTime = 0
      return function(){
      // 记录当前函数触发的时间
      var nowTime = new Date().getTime()
      // 当当前时间减去上一次执行时间大于这个指定间隔时间才让他触发这个函数
      if(nowTime - lastTime > delay){
        // 绑定this指向
        fn.call(this)
        //同步时间
        lastTime = nowTime
      }
      }
    }

2.防抖debounceTail

2.1)只执行首次

// 防抖 且首次执行
// 采用原理:第一操作触发,连续操作时,最后一次操作打开任务开关(并非执行任务),任务将在下一次操作时触发)
function debounceStart(fn, delay, ctx) {
  let immediate = true 
  let movement = null
  return function() {
    let args = arguments
    
    // 开关打开时,执行任务
    if (immediate) {
      fn.apply(ctx, args)
      immediate = false
    }
    // 清空上一次操作
    clearTimeout(movement)
    
    // 任务开关打开
    movement = setTimeout(function() {
      immediate = true
    }, delay)
  }
}

2.2)只执行最后一次

// 防抖 尾部执行
// 采用原理:连续操作时,上次设置的setTimeout被clear掉
function debounceTail(fn, delay, ctx) {
  let movement = null
  return function() {
    let args = arguments
    
    // 清空上一次操作
    clearTimeout(movement)
    
    // delay时间之后,任务执行
    movement = setTimeout(function() {
      fn.apply(ctx, args)
    }, delay)
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 #Javascript
微信小程序canvas动态时钟
Oct 22 #Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 #Javascript
微信小程序入门之绘制时钟
Oct 22 #Javascript
微信小程序入门之指南针
Oct 22 #Javascript
微信小程序实现拼图小游戏
Oct 22 #Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 #Javascript
You might like
php生成html文件方法总结
2014/12/01 PHP
php实现分页显示
2015/11/03 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python Pandas 箱线图的实现
2019/07/23 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python带参数打包exe及调用方式
2019/12/21 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
如何教少儿学习Python编程
2020/07/10 Python
python集合能干吗
2020/07/19 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
上班离岗检讨书
2014/09/10 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书