javascript --- 防抖与节流
说明
源码
1. 防抖与节流
1.1 防抖
防抖
: 触发事件后,在n秒内函数只执行一次记忆: 你手比较抖,不小心按了按钮2下…你只希望它只执行一次.且按第二次结束时间算…这就用到了防抖技术
1.2 节流
节流
: 连续发生的事件,在n秒内只执行一次函数
1.3 防抖与节流的区别
- 在一段时间内,不管触发多少次事件,事件处理函数都只处理一次称之为节流
- 防抖,是在最后一次事件发生时开始计算,到固定时间触发
1.4 准备工作
- 准备一个给定宽、高的盒子,初始化显示为0.(innerHTML = 0)
- 当鼠标移入盒子的时候,触发鼠标移动事件(box.onmousemove)
- 鼠标移动事件的处理函数: 当鼠标在盒子中移动的时候,会将一个全局变量(count)加1并写入盒子中
<!DOCTYPE html>
<html lang="en"><head><title>防抖与节流</title><style>.box {width: 150px;height: 150px;margin: 50px auto;line-height: 150px;text-align: center;border: 1px solid black;font-size: 50px;}</style></head><body><div id="box" class="box">0</div><script>var box = document.getElementById('box')var count = 1box.onmousemove = function() {box.innerHTML = count++}</script></body>
</html>
1.5 防抖的实现(先等待在执行)
- 思路:
- 在事件处理器中放一个延迟执行函数(setTimeout)
- 每触发一次,清除上一次的事件处理函数(clearTimout)
var box = document.getElementById('box')
var count = 1
var timer = null;
function debounce() {if (timer) clearTimeout(timer)timer = setTimeout(() => {box.innerHTML = count++;}, 1 * 1000);
}
box.onmousemove = debounce
1.5.1 防抖的改进
- 上面的等待时间和处理函数是静态的,封装成动态的
var debounce = (handUp, fn) {var timer = null;return function (){if(timer) clearTimeout(timer);timer = setTimeOut(function(){fn.call(this, arguments)}, handUp)}
}
box.onmousemove = debounce(1000, function(){box.innerHTML = count++;
})
1.6 防抖的实现(先执行在等待)
- 描述: 触发事件处理函数的时候,先执行一次函数,然后过n秒后再执行
- 思路:
- 由于核心是异步函数(setTimeout)的清除.
- 用一个flag函数记录当前定时器的状态,如果定时器为空则代表执行
function debounce(handUp, fn) {// 进来的时候设置为nullvar timer = nullreturn function() {if (timer) clearTimeout(timer)var flag = !timertimer = setTimeout(() => {timer = null}, handUp)if (flag) fn.apply(this, arguments)}
}
1.7 节流的实现
- 描述: 在给定时间内,无论时间处理函数触发多少次都只执行一次
- 思路:
1.根据timer是否为空,如果为空则执行一次.
2.在给定时间后,将定时器的序号timer清空.让它可以重新执行
function throttle(handUp, cb){var timer = null;return function(){if(!timer){timer = setTimeout(()=>{cb.apply(this);timer = null;}, handUp)}}
}
1.8 节流的实现(不使用定时器)
- 触发的第一次的时候,先记录第一次执行的时间(last)
- 触发然后随着函数不断触发,得到第一个时间间隔大于给定时间的环境.
- 触发给定的函数,然后将last设置为当前时间
function throttle(handUp, cb){var last = 0;return function(){var now = Date.now();if(now - last > handUp){last = now;cb.apply(this);}}
}
javascript --- 防抖与节流相关推荐
- JavaScript防抖与节流
JavaScript防抖与节流 1 为什么需要防抖和节流 2 防抖与节流原理 3 实现一个防抖函数 3.1 初步实现 3.2 this问题 3.3 event问题 3.4 立即执行 3.5 返回值问题 ...
- 前端战五渣学JavaScript——防抖、节流和rAF
看了<JavaScript高级程序设计>和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖和节流的概念取决于多数人的概念吧,并且基于伦敦前端工程师David Cor ...
- Javascript防抖函数节流函数的介绍(最详细)、彻底搞懂防抖节流的区别以及使用第三方库的防抖节流函数
文章目录 1.防抖节流函数介绍 1.1 认识防抖节流函数 1.2 认识防抖函数 1.3 防抖函数应用 1.4 认识节流函数 1.5 节流函数应用 1.6 生活中的例子 2.Underscore库 2. ...
- javascript --- 防抖与节流
先做一个监听鼠标移动的base: <style>#content{height:150px;width:200px;text-align:center;color:#fff;backgro ...
- JavaScript防抖与节流的具体实现及使用场景
文章目录 前言 一.什么是防抖和节流? 二.防抖 简单介绍 图解 代码如下(示例): 二.节流 简单介绍 图解 代码如下(示例): 三.防抖与节流的使用场景 总结 前言 最近遇到注册登陆按钮需要添加防 ...
- 全网最详细JavaScript防抖、节流函数解析
防抖与节流 防抖与节流 防抖 作用与简介 实现 核心与细节 应用场景 节流 作用与简介 实现 核心与细节 应用场景 防抖与节流 防抖 作用与简介 在一个周期T内,如果重复的进行某种响应操作,在不设置防 ...
- JavaScript 防抖和节流的实现
一.防抖 1. 认识防抖 防抖:在第一次触发事件时,不立即执行函数,而是给出一个限定值,比如200ms,然后: 如果在200ms内没有再次触发事件,那么执行函数 如果在200ms内再次触发函数,那么当 ...
- 前端性能优化经典:javascript防抖节流
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端的一些性能优化,js防抖节流,它是项目比较常见的性能优化方案,也是面试中常遇到的问题.希望下面文章对大家有所帮助. 我们在 ...
- mysql闭包的概念_彻底搞懂JavaScript的闭包、防抖跟节流
最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...
最新文章
- 机器学习之sklearn基础教程!
- 使用Callable和Future接口创建线程
- java完整版记事本_求java记事本完整版
- 【重复制造精讲】2、主数据介绍
- oracle z中rowid,oracle 10g中的ROWID
- 据说这份高考卷,只有程序员能得满分!
- Accerlerated c++ 答案
- 容器技术Docker K8s 4 容器编排技术基础-Kubernetes
- [转]innodb的锁时间
- Arcgis API For Javascript下载与安装
- 极限学习机 matlab,深度极限学习机的研究笔记
- tp 框架防sql注入
- python词频统计并按词频排序
- Java 菜鸟入门 | 常用进制转换
- excel转word_Office批量打印精灵教程--Word、PDF、Excel、PPT批量打印及批量转PDF
- 天正2014打开加载lisp_win10系统设置CAD2014打开自动加载天正的恢复方法
- 智慧城市解决方案(智慧城市系统及相关技术)
- 机器学习预测股票涨跌
- 浅谈快速沃尔什变换(FWT)快速莫比乌斯变换(FMT)
- 加密excel总出现html,高手才懂的Excel技巧!为Excel加密的几种秘籍
热门文章
- linux c socket编程详解,Linux c 网络socket编程
- python中的命令行参数_python学习笔记6:命令行参数
- 最大子序列求和_算法——求最大子段和
- 主叫号码未显示怎么设置_微信未授权抖音,应该怎么设置?
- linux升级ssh到6.6版本,CentOS6.5 openssh升级到openssh-7.6版本
- 广东东软学院计算机系主任罗,广东东软学院副校长朱爱红一行来访我校
- Python 常用系统模块整理
- java ListMapString,Object遍历的方法
- Mysql异常问题排查与处理——mysql的DNS反向解析和客户端网卡重启
- 设计模式(5)--工厂模式