本文具体内容已迁移至新博客：

谷歌搜索：site:fryao.blogspot.com
Fryao
注：需科学上网才可访问

一、防抖

1.1 定义

防抖指只有在n秒内没有再次触发某个函数时，才会真正执行这个函数；若n秒内再次触发此函数，则重新计算时间，如：在进行搜索的时候，当用户停止输入后才调用方法节约请求资源

1.2 应用场景

输入框中频繁的输入内容，搜索或者提交信息；
频繁的点击按钮，触发某个事件；
监听浏览器滚动事件完成操作；
用户缩放浏览器的resize事件(浏览器窗口大小发生变化时触发)

1.3 实现

使用第三方库underscore

js手写

<body><input type="text"><button id="cancel">取消</button></body>

防抖功能的基本实现
优化防抖函数：增加立即执行效果
优化防抖函数：增加取消效果（点击取消按钮取消发送请求）

二、节流

2.1 定义

节流指一定时间内js方法会执行一次，即执行函数的频率是固定的。类似于10 分钟一趟的公交车，不管10 分钟内有多少人在公交站等，10 分钟一到就会按时发车

2.2应用场景

监听页面的滚动事件；
鼠标移动事件；
用户频繁点击按钮操作；
游戏中的一些设计（如飞船发射导弹的频率）

2.3 js实现

定时器版本

定时器版本的节流函数具有两个特点:

节流功能的基本实现
节流优化：增加取消请求和立即执行

时间戳版本

时间戳版本的节流函数具有两个特点:

节流优化：增加取消请求和立即执行

三、防抖与节流区别

相同点：防抖节流的出现是为了解决频繁触发某个事造成的性能消耗的问题，使网络请求在合适的情况下发送
区别：两者区别在于节流是固定时间做某一件事，比如每隔n秒发一次请求；而防抖是在频繁触发时只执行一次（两者的前提都是频繁触发）

防抖与节流的原理、实现及优化相关推荐

防抖与节流方案_前端ajax优化解决方案
伴随着前端ajax的应用场景越来越多,那就免不了一个整合的ajax优化解决方案了,自己优化太麻烦?没事,有它帮你解决:hajax 与当下比较热门的请求库 axios 和原生的 fetch相比,haja ...
什么是防抖、节流？小程序项目优化——防抖、节流
1.什么是防抖.节流?(个人理解) 防抖:延迟函数执行.设置定时器,通过定时器来执行函数,可以重置定时器防止函数高频率的执行导致加载缓慢.加重服务器负担. 节流:间隔执行函数.如果某段代码在一段时间内 ...
防抖和节流的理解与实现
防抖和节流如何实现? 防抖节流概念: 防抖和节流都是为了项目优化而产生的.他们就是为了解决在短时间内连续重复的执行的事件带来的性能上的不佳.内存消耗问题.因为官方没有具体去定义.以下都是我个人的理解和 ...
ajax，HTTP原理 : 网络传输协议，网页从输入url到渲染的流程，函数防抖和节流
一. 前后端交互流程 1.服务器 : 提供某种服务器的机器(计算机) qq音乐:音频服务器 , 迅雷:文件服务器 , qq邮箱:邮件服务器,爱奇艺:视频服务器,谷歌:web服务器 2. 前端访问服 ...
JavaScript性能优化8——防抖与节流
目录一.引入为什么需要防抖和节流使用场景概念二.防抖函数实现场景原始代码防抖函数代码三.节流函数实现场景原始代码节流函数代码一.引入为什么需要防抖和节流我们现在JS主要是 ...
1、交互优化(防抖与节流、MouseEnter 和 mouseLeave事件)
需求:二级菜单的显示与隐藏.鼠标移到一级菜单上,会显示二级菜单,移出元素时,二级菜单则会隐藏. 有以下三种实现方法 1.首先我们想到的是通过js的鼠标事件来进行处理,那么我们应该先明确一下几个事件的基 ...
vue防抖和节流是什么_防抖和节流为什么重要！！！
是什么防抖和节流两者类似[但并不一样]是用来控制某一函数在特定时间内执行次数的技术点. 什么时候重要在给Dom绑定事件的时候显得尤为重要,因为相当于在事件函数和Dom之间加了一层控制层. 为什么重 ...
vue防抖和节流是什么_JavaScript防抖与节流，你知道多少？
JavaScript 的节流和防抖已经是老生畅谈的问题了,对于前端行业技术大牛来讲不过是小菜一碟,而对于绝大多数前端小白或初级工程师,绝对是必备的知识,值得学习. 接下来小郭就带大家一起学习" ...
高性能滚动scroll（防抖和节流）
滚动优化的由来滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件. var i = 0;window.addEventListener('scr ...
jQuery高级用法、axios、同源与跨域、JSONP以及防抖与节流
重点: 一.jQuery高级用法 1. jQuery实现文件上传 (1)定义UI结构 (2)验证是否选择了文件 ①将 jQuery 对象转化为 DOM 对象,并获取选中的文件列表 ②判断是否选择了文件 ...

防抖与节流的原理、实现及优化

文章目录