深入了解JavaScript 防抖和节流


Posted in Javascript onSeptember 12, 2019

概述

说明

在项目过程中,经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题,而往往我们只需去调用一次处理函数即可。有时也会遇到需要在某一规则内有规律的去触发对应的处理函数,所以就需要使用到函数防抖与函数节流来帮助我们实现我们想要的结果以及避免不必要的问题产生。

函数防抖(debounce)

定义:当持续触发事件时(如连续点击按钮多此),一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,有一次触发了事件,就重新开始延时。

原理:维护一个计时器,规定在延时时间后触发函数,但是在延时时间内再次被触发的话,就取消之前的计时器而重新设置,这样就能够保证只有最后一次操作被触发。即将所有操作合并为一个操作进行,并且只有最后一次操作是有效操作。

函数节流(throttle)

定义:当持续触发事件时,保证一定时间段内只调用一次事件处理函数,按照一定的规律在某个时间间隔内去处理函数。

原理:原理是通过判断是否达到一定时间来触发函数,使得一定时间内只触发一次函数。

代码

函数防抖

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间

每次触发事件时都取消之前的延时调用方法

function debounce(fn) {
  let timeout = null; // 创建一个标记用来存放定时器的返回值
  return function () {
  clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
  timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
    fn.apply(this, arguments);
  }, 500);
  };
}
function sayHi() {
  console.log('防抖成功');
}

var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖

函数节流

高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率

每次触发事件时都判断当前是否有等待执行的延时函数

function throttle(fn) {
  let canRun = true; // 通过闭包保存一个标记
  return function () {
  if (!canRun) return; // 在函数开头判断标记是否为true,不为true则return
  canRun = false; // 立即设置为false
  setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
    fn.apply(this, arguments);
    // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false,在开头被return掉
    canRun = true;
  }, 500);
  };
}
function sayHi(e) {
  console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 #Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 #Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 #Javascript
layer iframe 设置关闭按钮的方法
Sep 12 #Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 #Javascript
layer提示框添加多个按钮选择的实例
Sep 12 #Javascript
记录vue做微信自定义分享的一些问题
Sep 12 #Javascript
You might like
开源SNS系统-ThinkSNS
2008/05/18 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
javascrip关于继承的小例子
2013/05/10 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
vue-router单页面路由
2017/06/17 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
微信小程序checkbox组件使用详解
2018/01/31 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
python去除所有html标签的方法
2015/05/05 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
专业销售业务员求职信
2013/11/18 职场文书
运动会邀请函范文
2014/02/06 职场文书
渡河少年教学反思
2014/02/12 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
质量保证书格式模板
2015/02/27 职场文书
廉政承诺书2015
2015/04/28 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
自信主题班会
2015/08/14 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python