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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
js+css实现红包雨效果
Jul 12 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
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
vuex学习之Actions的用法详解
2017/08/29 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python装饰器知识点补充
2018/05/28 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
python提取xml里面的链接源码详解
2019/10/15 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
数控机械专业个人的自我评价
2014/01/02 职场文书
勾股定理课后反思
2014/04/26 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python