防抖节流 防抖和节流 函数节流 debounce throttle 每天补充一点 一些零碎的小知识点 JavaScript作用域和作用域链知多少 01-jquery概述 简单概述JSONP原理 02-$符号-jquery与js相互转换 遇见 vue.js --------阿文的vue.js学习笔记(2)----- 基本使用 全国鞋服行业首个5G专项应用落地柒牌 自动搬运作业提升效率150% 大数据系统提高生产效率超10% [网络安全自学篇] 九十四.《Windows黑客编程技术详解》之提权技术(令牌权限提升和Bypass UAC) 鸿蒙OS 2.0 开源蹭热浅读 蚂蚁三面滑铁卢!遭分布式截胡,靠这些笔记潜修30天,挺进京东 【高并发】Redis如何助力高并发秒杀系统,看完这篇我彻底懂了!! K8s概述:几种集群方案的对比 Linux到底该怎么学?RHCA架构师整理了300页学习笔记 到了2020年,技术水平到底需要达到怎样的程度才能成为顶级的阿里P8架构师 Linux怎么学?一张思维导图带你深入Linux核心原理 金九银十首战告捷!凭借这份Alibaba爆款“面试宝典”成功斩获美团Offer 大数据杀熟:我投之以元宝,它报之以砍刀! “物联网加持”下的社区长啥样儿? 潘云鹤院士:大数据智能是人工智能2.0的核心组成部分 防小孩和老人走失,定位精度达1厘米?上海社区为先进物联网产品提供落地场景 技术老兵十年专攻MySQL编写了763页核心总结,90MySQL问题全解 【Jenkins自动化部署】Windows节点Apache+Django服务自动化构建 Mybatis 使用通用 mapper 正道的光!阿里爆款Jenkins+K8s笔记终于全网开源了 不要死磕Java并发了,阿里P7架构师带你深入剖析synchronized的实现原理 EtherNet/IP协议基础知识(Part 1) CGB2005-京淘13 思科 OSPF协议简单配置与分析 在一家公司呆了 10 年的程序员,最后都怎么了? 致力物联网芯片研发,奕斯伟计算获逾20亿元融资 Unity性能优化技巧 纪念首次撸出来的编程题--2020深信服软件测试岗 qml 去除标题栏后 拖动窗口和改变窗口大小 如何舒服地在图书馆用ipad入门深度学习【windows jupyter远程】 力扣Java版个人代码分享-树篇( 107. 二叉树的层次遍历 II) 第十届蓝桥杯省赛java类B组 试题 E:迷宫 (动态规划之回溯法) Unity+罗技G29方向盘+Realistic Car Controller 制作简单的模拟驾驶 2020阿里笔试题解(9.11) 起飞!这份技术点拉满的ELk+Lucene笔记,可能价值百万 好文精选整理--Redis+Nginx+设计模式+Spring全家桶+SQL+Dubbo技术 覆盖全网的微服务架构笔记,看完还不懂你来打我 技术干货:JVM架构体系与GC命令全梳理,建议收藏 跪拜,阿里P9加班到凌晨,硬肝三个月推出这份IT架构运维实践 太厉害了,华为架构师终于整理出SSM+Nginx+Redis+SQL+微服务pdf 膜拜!终于有人总结出Spring+SpringMVC+MyBatis源码层PDF了 开发1-5年的Java程序员,该学习哪些知识实现涨薪30K? 云原生景观:供应层(Provisioning)介绍 vulhub学习笔记-struts2 S2-057 Remote Code Execution Vulnerablity远程代码执行 微服务启动报 Error creating bean with name ‘eurekaAutoServiceRegistration‘ 异常
您的位置:首页 >数据库 >

防抖节流 防抖和节流 函数节流 debounce throttle

防抖和节流

函数节流和函数防抖,两者都是优化高频率执行js代码的一种方法

防抖(debounce):只要不是最后一次触发就不会发送异步请求(定时器实现)。

节流(throttle):只要第一次请求发送后,响应没回来,就不能发送第二次请求(开关变量实现)。

防抖

现象

看下以下代码(模拟客户端向服务器发送请求):

window.onscroll = function () {console.log("发送agax请求,加载更多...");};

在这里插入图片描述

可以看到,我仅仅向下滑动了3次,向上滑动了三次就发出了将近70次请求。

解决

提前准备一个定时器,每次触发事件时都去看看定时器是不是空,不是的话取消之前的定时器,是的话就开始新一轮的等待。

var timer;window.onscroll = function () {//如果当前timer不是空,说明前边有一个等待的请求还未发送,还未发送。就停止前面的等待,if (timer !== undefined) {clearTimeout(timer);}// 从新开始下一轮的等待timer = setTimeout(function () {// 只有当200ms内未发生滚动是才发送正式的ajax请求;console.log("发送agax请求,加载更多...");}, 200);};

在这里插入图片描述

节流

现象

看下以下代码(模拟客户端向服务器发送请求):

<body style="height: 2000px"><buttonid="btn"style="position: fixed;right: 0;bottom: 200px"onclick="clickMe()">加载更多 </button><script>var btn = document.getElementById("btn");btn.onclick = function () {console.log("发送请求加载更多数据....");console.log("加载完成"); };</script></body>

可以发现如果不加以限制的话,快速点击,也会发出很多请求

在这里插入图片描述

解决

提前准备一个开关变量,当第一次点击发送请求时,允许发送,但是要把开关关闭,点击不再发送请求,直到请求回来后把开关打开,这次又能重新发送请求。

<body style="height: 2000px"><buttonid="btn"style="position: fixed;right: 0;bottom: 200px"onclick="clickMe()">加载更多 </button><script>var canClick = true;var btn = document.getElementById("btn");btn.onclick = function () {// 如果当前开关开着说明可以单击if (canClick) {// 先关闭开关canClick = false; // 再发送请求console.log("发送请求加载更多数据....");// setTimeout(function () {console.log("加载完成"); // 在请求的回调函数结尾重新打开开关允许再次单击发送请求canClick = true;// }, 3000);} else {}};</script></body>

在这里插入图片描述

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。