JavaScript 的防抖与节流
防抖(debounce) 和 节流(throttling)
防抖
基本思想
- debounce,去抖动。策略是当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作。
个人理解
- 防抖就是相同事件短时间内多次触发,只响应处理单位时间内最后一次事件。
函数封装
// 防抖 debounce 传入参数 func 要防抖的函数 wait 防抖的时间 后面的参数为要防抖的函数参数 function debounce(func, wait) {// 初始化 timer that args 变量let timer, that, argsreturn function () {// 保存 this argumentsthat = thisargs = arguments// 根据定时器判断上一次操作是否完成 如果没有完成 则清空上一个定时器 重新开启一个定时器timer && clearTimeout(timer)// 重新开启一个定时器timer = setTimeout(() => {// 定时器完成后 调用回调函数func.call(that, args)}, wait)} }
使用
debounce(fn, 2000, '参数')
节流
基本思想
- throttling,去节流。节流的策略是,固定周期内,只执行一次动作,若有新事件触发,不执行。周期结束后,又有事件触发,开始新的周期。
- 个人理解
- 节流就是相同事件频繁触发,按一定的时间频率响应处理
函数封装
// 节流 throttle 传入参数 func 要节流的函数 wait 节流的时间 后面的参数为要节流的函数参数 function throttle(func, wait) {// 初始化 变量let that, args, timerreturn function (args) {// 保存 thisthat = this// 保存 argumentsargs = arguments// 把 timer 定时器 当成 节流阀 if (!timer) {// 开启一个 timer 定时器 timer = setTimeout(() => { // 定时器时间到了 触发回调函数func.call(that, args) // 清空定时器 控制节流阀timer = null// 给定时器时间}, wait) }} }
使用
throttle(fn, 2000, '参数')
总结:
- 函数防抖与函数节流都是为了解决单位时间内,同一事件频繁触发而引起的性能损失问题。
- 通过函数防抖或者函数节流后,同一事件的响应频率得到控制。
- 函数防抖与节流能够优化页面性能。
JavaScript 的防抖与节流相关推荐
- 前端战五渣学JavaScript——防抖、节流和rAF
看了<JavaScript高级程序设计>和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖和节流的概念取决于多数人的概念吧,并且基于伦敦前端工程师David Cor ...
- JavaScript防抖与节流
JavaScript防抖与节流 1 为什么需要防抖和节流 2 防抖与节流原理 3 实现一个防抖函数 3.1 初步实现 3.2 this问题 3.3 event问题 3.4 立即执行 3.5 返回值问题 ...
- mysql闭包的概念_彻底搞懂JavaScript的闭包、防抖跟节流
最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...
- JavaScript 同源策略 跨域 JSONP CORS 防抖和节流
同源策略与跨域 同源策略 定义 比较 通俗理解 跨域 定义 浏览器对跨域请求的拦截 实现跨域的两种方法 自定义JSONP jQuery的JSONP 防抖与节流 防抖 节流 总结 同源策略 定义 同源策 ...
- Javascript防抖函数节流函数的介绍(最详细)、彻底搞懂防抖节流的区别以及使用第三方库的防抖节流函数
文章目录 1.防抖节流函数介绍 1.1 认识防抖节流函数 1.2 认识防抖函数 1.3 防抖函数应用 1.4 认识节流函数 1.5 节流函数应用 1.6 生活中的例子 2.Underscore库 2. ...
- javascript --- 防抖与节流
说明 源码 1. 防抖与节流 1.1 防抖 防抖: 触发事件后,在n秒内函数只执行一次 记忆: 你手比较抖,不小心按了按钮2下-你只希望它只执行一次.且按第二次结束时间算-这就用到了防抖技术 1.2 ...
- javascript --- 防抖与节流
先做一个监听鼠标移动的base: <style>#content{height:150px;width:200px;text-align:center;color:#fff;backgro ...
- JavaScript防抖与节流的具体实现及使用场景
文章目录 前言 一.什么是防抖和节流? 二.防抖 简单介绍 图解 代码如下(示例): 二.节流 简单介绍 图解 代码如下(示例): 三.防抖与节流的使用场景 总结 前言 最近遇到注册登陆按钮需要添加防 ...
- 全网最详细JavaScript防抖、节流函数解析
防抖与节流 防抖与节流 防抖 作用与简介 实现 核心与细节 应用场景 节流 作用与简介 实现 核心与细节 应用场景 防抖与节流 防抖 作用与简介 在一个周期T内,如果重复的进行某种响应操作,在不设置防 ...
最新文章
- lucene Hello World
- MATLAB中plot()画图的颜色线型和希腊字母参数设置
- mysql中非主键不能自增吗_mysql非主键自增长用法实例分析
- git 更新_[技术分享T.191212]GitLab使用方法及git命令常见问题(不断更新)
- ASP.NET MVC 入门8、ModelState与数据验证
- 从折叠屏到AR 三星Galaxy新品预热宣传片大招频现
- ml302硬件手册_Cat.1模组ML302使用MQTT协议接入OneNet平台
- Spring结合马士兵视频的学习经验
- 我想向你们推荐一门最好的python课程——CS61A学习笔记(一)
- 无线投影服务器连接投影仪,无线投屏器怎么与投影机连接
- Python程序员的发展前景
- Video标签的常用属性操作
- Processing编写熊猫
- TypeError: Student() takes no arguments
- PTA L1-003 个位数统计(详解)
- 火狐浏览器(firefox)简体中文最新版下载:
- 【Unity3d】将Particle转成UGUI
- win10任务栏的音量图标变透明且无法点击
- 关于CAN和BLF记录格式
- BDD测试框架Spock概要