原生JavaScript实现函数的防抖和节流

参考:https://www.jianshu.com/p/c8b86b09daf0

想详细了解的直接戳上面链接了,讲得非常清楚。下面只给代码和我自己写的注释,帮助理解背后实现的逻辑。


防抖(Debounce)

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行(前沿触发),false 表非立即执行(后沿触发)
*/
function debounce(func,wait,immediate) {
let timeout; return function () {
let context = this;
let args = arguments; if (timeout) clearTimeout(timeout); // timeout是定时器ID,只有初始化状态下第一次触发的时候才不会执行;后续在周期内触发db函数会清除定时器,避免在周期内初始化timeout导致事件函数被执行
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null; // 如果周期内db函数未触发,则重新初始化timeout
}, wait)
if (callNow) func.apply(context, args) // 初始化状态下,立即执行事件函数
}
else {
timeout = setTimeout(function(){ // 在周期内db函数被触发会更新定时器,延迟事件函数的执行
func.apply(context, args)
}, wait);
}
}
}

节流(Throttle)

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版(前沿触发),2 表定时器版(后沿触发)
*/
function throttle(func, wait ,type) {
if(type===1){
let previous = 0;
}else if(type===2){
let timeout;
}
return function() {
let context = this;
let args = arguments;
if(type===1){
let now = Date.now(); if (now - previous > wait) { // 初始状态下先执行一次事件函数,并且以当前时间戳为时间起点,往后只有经过的时间大于一个周期后触发th函数才会更新时间的起点并且执行事件函数
func.apply(context, args);
previous = now;
}
}else if(type===2){
if (!timeout) { // 初始状态下设置定时器,只有在定时器执行后(执行时间函数+初始化状态)才能重新设置
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
}

原生JavaScript实现函数的防抖和节流的更多相关文章

  1. 彻底搞懂JavaScript的闭包、防抖跟节流

    最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...

  2. JavaScript函数的防抖和节流

    防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 思路: 每次触发事件时都取消之前的延时调用方法 function debounce(fn) { let tim ...

  3. 使用rxjs以及javascript解决前端的防抖和节流

    JavaScript实现方式: 防抖 触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间:思路:每次触发事件时都取消之前的延时调用方法: 举个例子:做一个自动查 ...

  4. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  5. JavaScript 中函数节流和函数去抖的讲解

    JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...

  6. 来聊聊JavaScript中的防抖和节流

    目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...

  7. JavaScript 中的防抖和节流

    什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...

  8. 【跟着大佬学JavaScript】之lodash防抖节流合并

    前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...

  9. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

随机推荐

  1. RestFramework之视图组件

    一.视图组件的使用 在我们自己书写视图类时需要不断书写重复冗余的代码,看起来十分繁琐不简洁易见,当然rest_framework中的视图组件帮我们做到了一些必要的步骤,使我们节省了编写冗余代码的时间. ...

  2. TLS1.3 握手协议的分析

    1.LTS支持的三种基本的密码交换模式 (EC)DHE (Diffie-Hellman both the finte field and ellptic curve varieties) PSK-on ...

  3. 基于fastai的分类网络

    classify.fastai Classifier based on fastai 欢迎访问:https://github.com/pprp/classify.fastai/ 字符识别分类器-基于f ...

  4. Java枚举的小例子

    有一次工作中,要根据多个参数确定一个值(车辆事件),确定一个值需要的参数大部分的属性名称是相同的,少部分是独有的,但是参数的值几乎都是不同的: 因为参数太多,if-else写起来就太不优雅了,可以参考 ...

  5. flask实现文件下载功能

    在Flask想要实现文件下载功能,只需要导入 send_from_directory(directory, filename, **options) 然后在视图函数中返回该函数即可 示例代码如下 fr ...

  6. 使用集合方式注入IoC

    使用集合方式注入Ioc 1.创建类 //集合 private String[] arrays; //list集合 private List<Integer> lists; //map集合 ...

  7. 使用tippecanoe把GeoJSON制作成供mapbox展示的矢量切片vectortile

    本文记录一下把geojson格式的数据制作成本地的矢量切片,并在mapbox中展示的过程. 1.切片 1.1 矢量数据需要先转换为geojson,如果是shp格式可以使用QGIS或者下载shp2gwo ...

  8. SIGAI机器学习第一集 机器学习简介

    讲授机器学习的基本概念.发展历史与典型应用 大纲: 人工智能简介机器学习简介为什么需要机器学习机器学习的发展历史机器学习的典型应用人工智能主要的公司本课程讲授的算法 机器学习并不是人工智能一上来就采用 ...

  9. IDEA控制台中文乱码解决

    关于IDEA中文乱码的解决方法,如下. 1.打开idea安装目录,选择 打开文件,末尾添加-Dfile.encoding=UTF-8 2.打开IntelliJ IDEA>File>Sett ...

  10. Python之yield语法

    生成器与yield 函数使用yield关键字可以定义生成器对象.生成器是一个函数.它生成一个值的序列,以便在迭代中使用,例如: def countdown(n): print('倒计时:%s' % n ...