js 防抖、截流
突发奇想,在触发事件的时候,一些会频繁触发的事件会不会造成资源的浪费或者大量的计算造成页面卡顿,比如onresize,onscroll,onmousemove等事件。
然后就引出了一个新知识点:防抖、截流。
防抖:是指在事件触发结束后延时一段时间再去执行代码,如果在延时期间再次触发该事件,则重新计算延时时间。
例:浏览器触发onresize事件的时候,需要重新计算页面布局,在不防抖的情况下,不停的拖动浏览器窗口改变大小,浏览器就会不停的去计算,导致浪费大量的资源,加上防抖后,在触发事件后延时600毫秒才判断该事件结束,如果在600毫秒内再次触发了该事件,则重新计算600毫秒,直到判断事件结束之后才会触发;
代码如下:
//第一个参数为事件触发后需要执行的方法,第二个参数为延时时间
function debounce(method, delay) {
let timer = null;
return function () {
let context = this, args = arguments;
if(timer){
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function () {
method.apply(context, args);
}, delay);
}
}
let fun= debounce(() => {
console.log('123');
}, 600);
window.addEventListener('resize', fun);
截流:是指在规定时间内只触发一次事件,减少事件执行的频率;
例:实时判断input框中的内容是否合法,正常情况下,我们给input 绑定一个键盘弹起事件,弹起是时候去做判断,如果用户输入过快,则会去做多次判断。截流一秒的话就是指在一秒内不管用户输入多少次,都之后去判断一次,既不会影响用户体验,有达到了节流的目的
代码如下:
function throttle(func, wait) {
let lastTime = null
let timeout
return function () {
let context = this;
let now = new Date();
let arg = arguments;
// 如果上次执行的时间和这次触发的时间大于一个执行周期,则执行
if (now - lastTime - wait > 0) {
// 如果之前有了定时任务则清除
if (timeout) {
clearTimeout(timeout)
timeout = null
}
func.apply(context, arg)
lastTime = now
} else if (!timeout) {
timeout = setTimeout(() => {
// 改变执行上下文环境
func.apply(context, arg)
}, wait)
}
}
}
let quest = throttle(()=>{console.log("数据判断完成")},1000)
let btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click',quest)
使用方法和防抖相同
总结:一般情况下onresize,onkeyup事件使用防抖;onscroll、onmousemove等事件使用截流。
完工,困告。
js 防抖、截流的更多相关文章
- 深入理解JS防抖与节流
参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...
- js防抖函数
一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如 ...
- 因为它,我差点删库跑路:js防抖与节流
前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...
- 面试必问题:JS防抖与节流
摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...
- js防抖和节流
今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...
- 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...
- js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据
防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...
- JS 防抖函数和节流函数
文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...
- js 防抖 debounce 与 节流 throttle
debounce(防抖) 与 throttle(节流) 主要是用于用户交互处理过程中的性能优化.都是为了避免在短时间内重复触发(比如scrollTop等导致的回流.http请求等)导致的资源浪费问题. ...
随机推荐
- 在VMware环境下安装CentOS7
1. 软件准备: 推荐使用VMware,在这里我使用的是VMware15 映像:可以去官网下载,没有的话也可以在下方链接里下载 链接:https://pan.baidu.com/s/1r_7K-UI0 ...
- Linux基础知识回顾
1.描述计算机的组成及其功能 计算机是由计算机软件系统和计算机硬件系统两大系统组成 计算机硬件组成 1946年数学家冯诺依曼提出,计算机硬件由运算器.控制器.存储器.输入设备和输出设备5大部件组成,如 ...
- C#winfrom文件下载到本地
string remoteUri = System.IO.Path.GetDirectoryName(url); string fileName = System.IO.Path.GetFileNam ...
- nyoj 290 动物统计加强版 (字典树 (Trie) PS:map<TLE>)
动物统计加强版 时间限制:3000 ms | 内存限制:150000 KB 难度:4 描述 在美丽大兴安岭原始森林中存在数量繁多的物种,在勘察员带来的各种动物资料中有未统计数量的原始动物的名单 ...
- hdu 1028 Sample Ignatius and the Princess III (母函数)
Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- 微服务架构 - Jimu(积木) 升级 1.0.0 支持 .Net Core 3.0
如果不知道 Jimu(积木) 是啥,请移步 .Net Core 分布式微服务框架介绍 - Jimu 这次升级除了支持 .Net Core 3.0 还新增部分功能,如 REST, 链路跟踪等,以下为详细 ...
- Obtaining the backtrace - libunwind
Sometimes when working on a large project, I find it useful to figure out all the places from which ...
- kali下安装phpstudy
只需要用到三条命令就可完成,具体如下: wget -c http://lamp.phpstudy.net/phpstudy.bin chmod +x phpstudy.bin #权限设置 ./phps ...
- TypeError: Cannot read property '_t' of undefined (VUE + ElementUI + i18n)
在使用vue的ElementUI库,在多语言时报错: TypeError: Cannot read property '_t' of undefined 错误是在点菜单栏时随机抛出的,F12抓不到,只 ...
- python3 之 内置函数range()
一.语法: range(stop) range(start,stop,step) start:计数从start开始,默认是从0开始.eg:range(5)等价于range(0,5) stop:计数到s ...