防抖(debounce)和节流(throttle)
2024-09-01 01:31:35
场景说明:一般我们在前端页面中会给元素绑定click、scroll、onmousemove、resize等事件,这些事件的执行函数如果是去发请求获取数据的话,我们无意识的连续点击或者连续滚动会给服务器带来很大的压力,因此我们需要在连续触发事件的时候设定每隔一段时间再去执行事件函数,这就是防抖和节流出现的背景。
例如:
<div id="content" style="height:150px;background-color:#ccc;"></div>
let content = document.getElementById('content'); function fetchData(){
console.log('我是测试数据');
} content.onmousemove = fetchData();
以上代码为div元素绑定了onmousemove事件,当鼠标经过div在其上移动时,会连续触发事件,假设事件执行函数需要去请求数据,则会一直发起请求,造成不必要的服务器压力。
1、防抖
概念:指出发时间后在n秒内只能执行一次,若在n秒内又触发了事件,则会重新计算函数执行时间
防抖函数分为立即执行版和非立即执行版
(1)立即执行版
立即执行即触发事件后函数立即执行,然后在n秒内不能触发事件才能继续执行函数的效果,假设在n秒内一直触发事件则函数永远不会执行直到停止触发n秒之后,实现如下:
function debounce(func,wait){
let timer;
return function(){
let context = this;
let args = arguments;
if(timer) clearTimeout(timer);
let callNow = !timer; //记录计时器是否结束
timer = setTimeout(()=>{
time = null;
},wait);
if(callNow){
func.apply(context,args);
}
}
}
context.onmouseover = debounce(fetchData,1000);
(2)非立即执行版
非立即执行即触发事件之后函数不会立即执行,而是在n秒之后执行,如果在n秒内又触发了事件,则会重新计算函数的执行时间。实现如下:
function debounce(func,wait){
let timer;
return function(){
let contex = this;
let args = arguments;
if(timer) clearTimeout(timer);
timer = setTimeout(()=>{
func.apply(contex,arguments);
},wait)
}
}
context.onmousemove = debounce(fetchData,1000)
2、节流
概念:指连续触发的事件在n秒内只能执行一次
节流也有两种实现方式,一种是利用时间戳,一种是利用定时器。
(1)时间戳
function throttle(func,wait){
let last = 0;//上次触发时间戳
return function(){
let contex = this;
let args = arguments;
let now = +new Date(); //当前时间戳
if(now - last>wait){ //时间间隔大于wait时执行
last = now;
func.apply(context,args);
}
} }
(2)定时器
function throttle(func,wait){
let timer;
return function(){
let context = this;
let args = arguments;
if(!timer){
timer = setTimeout(()=>{
timer = null;
func.apply(context,args)
},wait)
}
} }
最新文章
- 重复加载同一个jqgrid
- 最近使用JQuery Easyui 碰到的几个奇怪问题
- SharePoint 2013 Content Deployment 报错 These columns don&#39;t currently have unique values
- window_x64微信小程序环境搭建
- 在vs2005中使用SVN进行版本管理
- [Practical Git] Configure global settings with git config
- jquery中的index方法
- C:数据结构与算法之顺序表
- 使用locate 的正则查询 查找所有main.c
- pycharm(pythoon3)_django2.0_xadmin创建测试用例后台管理系统
- PAT之气死人不偿命的3n+1猜想
- io系列之其他事项
- windows下django1.7 +python3.4.2搭建记录1
- Java笔记(三)异常
- 匿名内部类中使用的外部局部变量为什么只能是final变量
- 2018.09.30 bzoj4025: 二分图(线段树分治+并查集)
- 10.openldap备份与恢复
- 让网页的title动起来
- Java中网络相关API的应用——InetAddress&;URL
- 程序单一实例实现 z