如何在面试中手写出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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
jquery tab插件制作实现代码
Jun 22 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
js使用递归解析xml
Dec 12 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
es6函数之尾递归用法实例分析
Apr 25 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
php工具型代码之印章抠图
2018/07/18 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Python Requests库基本用法示例
2018/08/20 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
水产养殖学应届生求职信
2013/09/29 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
合作意向书
2014/07/30 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
教师个人成长总结
2015/02/11 职场文书
个人工作能力自我评价
2015/03/05 职场文书
2015年加油站工作总结
2015/05/13 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
入党培养人考察意见
2015/06/08 职场文书
业务员管理制度范本
2015/08/06 职场文书
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python