JS防抖和节流实例解析


Posted in Javascript onSeptember 24, 2019

日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为debounce(防抖)和throttle(节流)

函数防抖

当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次。

function debounce(fn, wait) {
  var timeout = null;   //定义一个定时器
  return function() {
    if(timeout !== null) 
        clearTimeout(timeout); //清除这个定时器
    timeout = setTimeout(fn, wait); 
  }
}
// 处理函数
function handle() {
  console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

JS防抖和节流实例解析

如上所见,当持续触发scroll函数,handle函数只会在1秒时间内执行一次,在滚动过程中并没有持续执行,有效减少了性能的损耗

函数节流

当持续触发事件时,保证在一定时间内只调用一次事件处理函数,意思就是说,假设一个用户一直触发这个函数,且每次触发小于既定值,函数节流会每隔这个时间调用一次

用一句话总结防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行
实现函数节流我们主要有两种方法:时间戳和定时器

例如

var throttle = function(func, delay) {
  var prev = Date.now();
  return function() {
    var context = this;  //this指向window
    var args = arguments;
    var now = Date.now();
    if (now - prev >= delay) {
      func.apply(context, args);
      prev = Date.now();
    }
  }
}
function handle() {
  console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

这个节流函数利用时间戳让第一次滚动事件执行一次回调函数,此后每隔1000ms执行一次,在小于1000ms这段时间内的滚动是不执行的
再举一个定时器的例子:

var throttle = function(func, delay) {
  var timer = null;
  return function() {
    var context = this;
    var args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}
function handle() {
  console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

当触发事件的时候,我们设置了一个定时器,在没到1000ms之前这个定时器为null,而到了规定时间执行这个函数并再次把定时器清除。也就是说当第一次触发事件,到达规定时间再执行这个函数,执行之后马上清除定时器,开始新的循环,那么我们看到的效果就是,滚动之后没有马上打印,而是等待1000ms打印,有一个延迟的效果,并且这段时间滚动事件不会执行函数。
单用时间戳或者定时器都有缺陷,我们更希望第一次触发马上执行函数,最后一次触发也可以执行一次事件处理函数

var throttle = function(func, delay) {
   var timer = null;
   var startTime = Date.now(); //设置开始时间
   return function() {
       var curTime = Date.now();
       var remaining = delay - (curTime - startTime); //剩余时间
       var context = this;
       var args = arguments;
       clearTimeout(timer);
       if (remaining <= 0) {   // 第一次触发立即执行
          func.apply(context, args);
          startTime = Date.now();
       } else {
          timer = setTimeout(func, remaining);  //取消当前计数器并计算新的remaining
       }
   }
}
function handle() {
   console.log(Math.random());
}
 window.addEventListener('scroll', throttle(handle, 1000));

JS防抖和节流实例解析

在节流函数内部使用开始时间startTime、当前时间curTime和剩余时间remaining,当剩余时间小于等于0意味着执行处理函数,这样保证第一次就能立即执行函数并且每隔delay时间执行一次;如果还没到时间,就会在remaining之后触发,保证最后一次触发事件也能执行函数,如果在remaining时间内又触发了滚动事件,那么会取消当前的计数器并计算出新的remaing时间。通过时间戳和定时器的方法,我们实现了第一次立即执行,最后一次也执行,规定时间间隔执行的效果,可以灵活运用在开发中

PS:防抖和节流能有效减少浏览器引擎的损耗,防止出现页面堵塞卡顿现象,应该熟练掌握。最后再次感谢原作者的总结,热心分享技术让我们的生活变得更好

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

Javascript 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
多种方式实现js图片预览
Dec 12 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
Web安全之XSS攻击与防御小结
Dec 13 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
vue.js实现图书管理功能
Sep 24 #Javascript
layui table单元格事件修改值的方法
Sep 24 #Javascript
Javascript Dom元素获取和添加详解
Sep 24 #Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 #Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 #Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 #Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 #Javascript
You might like
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python常用小技巧总结
2015/06/01 Python
Python socket实现简单聊天室
2018/04/01 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
商务日语专业毕业生求职信
2013/10/26 职场文书
机械系大学毕业生推荐信
2013/11/27 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
后备干部推荐材料
2014/12/24 职场文书
试用期辞职信范文
2015/03/02 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
索尼ICF-5900W收音机测评
2022/04/24 无线电