如何在面试中手写出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插件实现图片切换特效
Dec 12 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
vue生命周期的探索
Apr 03 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
面包屑导航详解
2017/12/07 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Opencv求取连通区域重心实例
2020/06/04 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
《桥》教学反思
2014/04/09 职场文书
机房搬迁方案
2014/05/01 职场文书
旅游节目策划方案
2014/05/26 职场文书
幼儿园教师求职信
2015/03/20 职场文书
任命书格式模板
2015/09/22 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
汉语拼音教学反思
2016/02/22 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python