如何在面试中手写出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 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
url参数中有+、空格、=、%、&、#等特殊符号的问题解决
May 15 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
Dec 23 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
如何通过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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP整合PayPal支付
2015/06/11 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
应届生煤化工求职信
2013/10/21 职场文书
资产经营总监岗位职责
2013/12/04 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
幼儿教师研修感言
2014/02/12 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
工作保证书范文
2014/04/29 职场文书
教师教学评估方案
2014/05/09 职场文书
2014年党课学习材料
2014/05/11 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python