JS中的防抖与节流及作用详解


Posted in Javascript onApril 01, 2019

概念

函数防抖(debounce)是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次,比如说用手指一直按住一个弹簧,它将不会弹起直到你松手为止。

函数节流是指一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期,一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。

函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

下面通过示例代码看下防抖和节流。

什么是防抖?and什么是节流?一起来开心的学习下吧。

首先什么是防抖:就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次。举个例子,当你在页面中使用onkeyUp监听用户在input框中的输入,如果用户按住一个6不放,那监听事件岂不是一直被触发,这样就浪费了一部分性能了,那么我们在一定事件内监听,也就是说我过了一秒再来看看你输入了多少个6,那这样是不是轻松多了。ok,解释清楚了那么就来看下代码,更加清晰。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>防抖</title>
</head>
<body>
 <button id="debounce">防抖,防抖,防抖</button>
 <script>
 window.onload = function () {
  let obtn = document.getElementById('debounce'); //获取按钮
 obtn.addEventListener('click',debounceHandle(debounce),false); //监听绑定事件
 }

 //防抖函数
 function debounceHandle (fn) {
  let timer = null;
  return function () {
  clearTimeout(timer); //如果存在事件就清除定时器
  timer = setTimeout(function(){ //如果不存在那么就开启定时器
   fn.call(this,arguments);
  },300)
  }
 }

 //执行函数
 function debounce() {
  console.log('防抖,防抖,防抖');
 }
 </script>
</body>
</html>

上面函数也就是在300毫秒内,只会触发一次事件。总结:防抖就是在任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行。

接下来什么是节流,假如在一个页面中有任意多张图片,那么就有可能会使用懒加载技术,懒加载呢就是监听滚动条的位置,那么如果用户一直在滚动,那么事件监听就一直在触发,也是浪费性能。那么节流就是在一定时间间隔内触发一次事件。话不多说,先看代码。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>节流</title>
 <style>
 div {
  height: 5000px;
 }
 </style>
</head>
<body>
 <div>节流,节流,节流</div>
 <script>
 window.onload = function () {
  window.addEventListener('scroll',throttleHandle(throttle),false); //监听绑定事件
 }

 //节流函数
 function throttleHandle (fn) {
  let timer = null,
   booleanVal = true; // 声明一个变量标志做判断
  return function () {
   if (!booleanVal) {
   return 
   } //如果事件正在执行,那么就返回,将布尔值改为false
   booleanVal = false;
   //事件未执行,创建事件
   timer = setTimeout(function() {
   fn.apply(this,arguments);
   booleanVal = true; //事件执行完将布尔值改回
   },300)
  }
 }

 //执行函数
 function throttle() {
  var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scrollNum);
 }
 </script>
</body>
</html>

这样,在某些特定的工作场景,我们就可以使用防抖与节流来减少不必要的损耗。最后提一个问题,上句提到造成不必要的损耗,那么请问是什么损耗呢?

总结

以上所述是小编给大家介绍的JS中的防抖与节流及作用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 遍历验证所有文本框的值
Aug 27 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
10个实用的脚本代码工具
May 04 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
微信小程序 slot踩坑的解决
Apr 01 #Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 #Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 #Javascript
详解JavaScript中的函数、对象
Apr 01 #Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 #Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 #Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 #Javascript
You might like
一些使用频率比较高的php函数
2008/10/03 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
初步讲解Python中的元组概念
2015/05/21 Python
Python的装饰器使用详解
2017/06/26 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
详解python对象之间的交互
2020/09/29 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
软件测试英文面试题
2012/10/14 面试题
实习老师离校感言
2014/02/03 职场文书
运动会稿件100字
2014/02/21 职场文书
委托证明模板
2014/09/16 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js