突发奇想,在触发事件的时候,一些会频繁触发的事件会不会造成资源的浪费或者大量的计算造成页面卡顿,比如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. PowerMock学习(一)之PoweMock的入门--模拟新增学生操作

    关于powermock 在TDD领域Mock框架有很多,比如EasyMock,JMock,Mockito.可能有些同学会好奇了,为什么要重点把powermock拿出来呢,因为powermock可以解决 ...

  2. maven(1)

    Maven进价:Maven的生命周期阶段 一.Maven的生命周期 Maven的生命周期就是对所有的构建过程进行抽象和统一.包含了项目的清理.初始化.编译.测试.打包.集成测试.验证.部署和站点生成等 ...

  3. 服务器上传文件到oss,以及备份

    公司的前端js,css是发布到oss的,所以要求后台在发布的同时先把即将要覆盖的文件备份到服务器上 步骤是先上传文件到服务器,服务器上传到oss服务器之前先备份相同文件名的文件 public clas ...

  4. CSS如何设置列表样式属性

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  5. Go 语言优秀资源整理,为项目落地加速🏃

    最后更新于2019.11.22 Go 语言优秀资源整理,为项目落地加速

  6. C语言程序设计100例之(17):百灯判亮

    例17   百灯判亮 问题描述 有序号为1.2.3.….99.100的100盏灯从左至右排成一横行,且每盏灯各由一个拉线开关控制着,最初它们全呈关闭状态.有100个小朋友,第1位走过来把凡是序号为1的 ...

  7. SpringBoot 配置文件与依赖库分离打包配置

    一.应用场景 一般情况下我们对springboot应用打包时使用springboot的maven插件spring-boot-maven-plugin的maven进行打包,打包完成得到一个fatjar, ...

  8. deepin安装pip

    sudo apt install python3-venv python3-pip  升级最新版 pip3 install --upgrade pip 更新完以后就报错网上的解决办法没有好使的 退回版 ...

  9. PHP数组具有的特性有哪些

    PHP 的数组是一种非常强大灵活的数据类型.以下是PHP数组具有的一些特性: 1.可以使用数字或字符串作为数组键值 1 $arr = [1 => 'ok', 'one' => 'hello ...

  10. 20191017-6alpha week 2/2 Scrum立会报告+燃尽图 05

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9802 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩昊 ...