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 省地市级联选择
Feb 07 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
javascript闭包的理解
Apr 01 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
微信小程序实现签字功能
Dec 23 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
浅析php学习的路线图
2013/07/10 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
smarty中常用方法实例总结
2015/08/07 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Python pymongo模块用法示例
2018/03/31 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
python脚本第一行如何写
2020/08/30 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
什么是类的返射机制
2016/02/06 面试题
c++工程师面试问题
2013/08/04 面试题
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书