突发奇想,在触发事件的时候,一些会频繁触发的事件会不会造成资源的浪费或者大量的计算造成页面卡顿,比如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 防抖、截流的更多相关文章

  1. 深入理解JS防抖与节流

    参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为deb ...

  2. js防抖函数

    一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如 ...

  3. 因为它,我差点删库跑路:js防抖与节流

    前言 前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与 ...

  4. 面试必问题:JS防抖与节流

    摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: ...

  5. js防抖和节流

    今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...

  6. 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...

  7. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

  8. JS 防抖函数和节流函数

    文章转载自:木上有水 什么是防抖?什么是节流? 工作中我们经常会用一些方法监听某些事件的完成,比如scroll.resize.keyup等. 常规事件触发的时候,比如scroll,会在短时间内触发多次 ...

  9. js 防抖 debounce 与 节流 throttle

    debounce(防抖) 与 throttle(节流) 主要是用于用户交互处理过程中的性能优化.都是为了避免在短时间内重复触发(比如scrollTop等导致的回流.http请求等)导致的资源浪费问题. ...

随机推荐

  1. Arduino 处理JSON格式的数据

    Arduino 处理JSON格式的数据 1.安装 ArduinoJson这个包 2.程序代码 # include <ArduinoJson.h> #define ALINK_BODY_FO ...

  2. nyoj 457-大小写互换

    457-大小写互换 内存限制:64MB 时间限制:1000ms 特判: No 通过数:18 提交数:21 难度:0 题目描述:       现在给出了一个只包含大小写字母的字符串,不含空格和换行,要求 ...

  3. BeautifulSoup随笔

    BeautifulSoup是一个类 b = BeautifulSoup(html) b对象有与html结构相关的各种方法和和属性. a = b.findAll('a')获得标签的对象 a对象又有关于属 ...

  4. HashSet源码学习,基于HashMap实现

    HashSet源码学习 一).Set集合的主要使用类 1). HashSet 基于对HashMap的封装 2). LinkedHashSet 基于对LinkedHashSet的封装 3). TreeS ...

  5. EFK教程(3) - ElasticSearch冷热数据分离

    基于ElasticSearch多实例架构,实现资源合理分配.冷热数据分离 作者:"发颠的小狼",欢迎转载与投稿 目录 ▪ 用途 ▪ 架构 ▪ 192.168.1.51 elasti ...

  6. C#泛型自己的理解和总结

    万事开头难,今天先从随笔开始,记录工作中平时不太注意到的知识点.今天开始说下泛型. 泛型在我们项目中很是常见,使用很广泛,我觉的它有以下几个优点. 1.安全性. 2.性能. 3.二进制代码的重用. 4 ...

  7. nslookup命令查找域名

    了解 DNS 域名服务 熟悉使用 nslookup 查找 DNS 服务器上登记的域名,记录几次查询的结果, 及服务器的 ip. 1. 某个子域下的一部分主机的名字- IP 地址对应关系,如 flame ...

  8. UCloud 云服务内容审核 Java 版本实现

    前言 最近不少小伙伴反映上传小黄图偶尔性的异常,并且不能上传动态图片,很是苦恼!无她,鉴黄API还没有这么智能,毕竟是自己训练的,不是那么专业!为了更好的服务广大网友,撸主决定接入更加智能快速的鉴黄服 ...

  9. 【Luogu 3275】[SCOI2011]糖果

    Luogu P3275 显然是一道经典的差分约束系统 相关知识可以查看:[Luogu 1993]差分约束系统问题--小K的农场 值得注意的是这题使用最长路更合适,因为每一个人都要取得至少一个糖果.在添 ...

  10. 【Luogu P3834】可持久化线段树(主席树)

    Luogu P3834 可持久化数据结构就是支持在历史版本上进行查询和修改操作的数据结构. 主席树就是对线段树的改进,使之可持久化. 前置知识:动态开点线段树 我们利用权值(值域)线段树统计区间内的数 ...