原生JavaScript实现函数的防抖和节流
原生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实现函数的防抖和节流的更多相关文章
- 彻底搞懂JavaScript的闭包、防抖跟节流
最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...
- JavaScript函数的防抖和节流
防抖 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间 思路: 每次触发事件时都取消之前的延时调用方法 function debounce(fn) { let tim ...
- 使用rxjs以及javascript解决前端的防抖和节流
JavaScript实现方式: 防抖 触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间:思路:每次触发事件时都取消之前的延时调用方法: 举个例子:做一个自动查 ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- JavaScript 中函数节流和函数去抖的讲解
JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...
- 来聊聊JavaScript中的防抖和节流
目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...
- JavaScript 中的防抖和节流
什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...
- 【跟着大佬学JavaScript】之lodash防抖节流合并
前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
随机推荐
- Ubuntu18.04开机启动sudo命令
首先接前文:ubuntu18.04 下启动Android Studio报错KVM is required to run this AVD. /dev/kvm device: permission de ...
- docker 推送镜像到阿里云
1. 登录阿里云Docker Registry $ sudo docker login --username=www.18860363800@hotmail.com registry.cn-beiji ...
- Nuget & VS Plugin
VS Plugin vsCode:https://marketplace.visualstudio.com/vscode vs:https://marketplace.visualstudio.com ...
- Python_算术运算符
1.算术运算符 示例: >>> num1=7 >>> num2=3 >>> num1+num2 #+ 10 >>> num1-n ...
- P1462 通往奥格瑞玛的道路[最短路+二分+堆优化]
题目来源:洛谷 题目背景 在艾泽拉斯大陆上有一位名叫歪嘴哦的神奇术士,他是部落的中坚力量 有一天他醒来后发现自己居然到了联盟的主城暴风城 在被众多联盟的士兵攻击后,他决定逃回自己的家乡奥格瑞玛 题目描 ...
- Mybatis配置文件中#{ }和${ }的区别
#{ }和${ }都可以从map中取到相对应的值, 但是 #{ }采取的是预编译的方式(PreparedStatement)来执行sql语句,有效防止了sql注入问题 select * from bo ...
- MySQL之JDBC插入、修改、删除封装集于一个方法
1. 先建四个包 ① com.tz.entity 实体包 ② com.tz.dao 数据访问层包 -> com.tz.dao.impl 实现包 ③ com.tz.util 工具类包 ④ com. ...
- 使用 IDEA 打包spring cloud 成 jar在ubuntu 中运行
1. 打开终端 termial , 使用 mvn install . 如果提示 mvn 不是xx 命令 ; 2 则需要配置环境变量 : path : C:\Program F ...
- [Angular 8] Implement a Custom Preloading Strategy with Angular
Preloading all modules is quite an extreme approach and might not always be desirable. For instance, ...
- 三十八. 分库分表概述 配置mycat
1.搭建mycat 分片服务器 数据库主机 192.168.4.55 使用db1库存储数据 数据库主机 192.168.4.56 使用db2库存储数据 主机 192.168.4.54 运行myca ...