js防抖函数和节流函数使用场景和实现区别示例分析


Posted in Javascript onApril 11, 2020

本文实例讲述了js防抖函数和节流函数使用场景和实现区别。分享给大家供大家参考,具体如下:

开发过程中,都遇到过某个事件被频发触发的场景,比如resize,scroll事件,input事件,而对应的事件处理函数也会被高频率调用,这时会增加浏览器负担,用户体验也不好,这也是防抖函数和节流函数存在的意义和使用场景。

函数防抖(debounce):

持续触发事件时,在设定时间段内没有被触发,才去调用事件处理函数,在设定时间段内如果事件又被触发,则不调用事件处理函数,并从触发事件时间重新开始延时。

具体实现:

设计思路:在setTimeout中调用事件处理函数,如果在定时器触发函数执行之前又触发函数,清除定时器。

function debounce(fn, timeout){
  timeout = timeout || 1000;
  let timer;
  return () => {
    if(timer){ clearTimeout(timer)}
    timer = setTimeout(() => {
      fn()
    },timeout)
  }
}
 
function printEvent(){
  console.log('1121212')
}
 
window.addEventListener('scroll',debounce(printEvent,1000),false)

节流函数(throttle)  throttle   ['θrɑt(ə)l]  油门;节气门;扼杀

当事件被持续触发时,在设定时间内只让事件处理函数触发一次。

定时器实现模式:定时器在延时时间执行过后,重置为null, 定时器为null时,重新设置定时器,如此循环

//节流函数
function throttle(fn, range){
  range = range || 1000;
  let timer;
  return () => {
    //console.log(111,typeof timer)
    if(!timer){
      timer = setTimeout( () => {
        fn()
        timer = null
      },range)
    }
  }
}
 
window.addEventListener('mousemove',throttle(printEvent,1000),false)

时间戳实现模式:初始化时获取时间,每次触发事件时再次获取时间,两次时间间隔等于或大于设定时间,执行事件,初始化时间重置为当前时间,如此循环。

//节流函数 时间戳模式
var throttle2 = function(func, delay) {
var prev = Date.now();

return function() {


var context = this;


var args = arguments;


var now = Date.now();


if (now - prev >= delay) {



func.apply(context, args);



prev = Date.now();


}

}
}

也可以使用时间戳加定时器结合实现:

总结:

函数防抖:在无事件触发后的设定时间执行事件,将几次操作合并为一此操作进行。这样一来,只有最后一次操作能被触发。

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

区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。

比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
你可能不再需要JQUERY
Mar 09 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
js new Date()实例测试
Oct 31 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 #Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 #Javascript
JavaScript运行机制实例分析
Apr 11 #Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 #Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 #Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 #Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 #Javascript
You might like
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
python开发前景如何
2020/06/11 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
python常量折叠基础知识点讲解
2021/02/28 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
教师实习自我鉴定
2013/12/18 职场文书
经典禁毒标语
2014/06/16 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
三峡人家导游词
2015/01/31 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python