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 相关文章推荐
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
JavaScript实例 ODO List分析
Jan 22 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生成静态HTML速度快类库
2007/03/18 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
js友好的时间返回函数
2016/08/24 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
原生JavaScript实现随机点名表
2021/01/14 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
python查询sqlite数据表的方法
2015/05/08 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
深入了解Python在HDA中的应用
2019/09/05 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
酒店管理专业毕业生推荐信
2013/11/10 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
金秋助学感谢信
2015/01/21 职场文书
龙门石窟导游词
2015/02/02 职场文书
社会实践活动总结
2015/02/05 职场文书