如何在面试中手写出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 相关文章推荐
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
JS变量及其作用域
Mar 29 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
小程序表单认证布局及验证详解
Jun 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 如何向 MySQL 发送数据
2006/10/09 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
php类常量用法实例分析
2015/07/09 PHP
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
关于诚信的活动方案
2014/08/18 职场文书
开展创先争优活动总结
2014/08/28 职场文书
学生实习证明范文
2014/09/28 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang