如何在面试中手写出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 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
一些经常会用到的Javascript检测函数
May 31 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python切换hosts文件代码示例
2013/12/31 Python
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
仓库主管的岗位职责
2013/12/04 职场文书
简单的辞职信范文
2014/01/18 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
2014年招商工作总结
2014/11/22 职场文书
社团招新宣传语
2015/07/13 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
Echarts如何重新渲染实例详解
2022/05/30 Javascript