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 Base类 包含基本的方法
Jul 22 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
js正则表达式的使用详解
Jul 09 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
jQuery实现文档树效果
Feb 20 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 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读取javascript设置的cookies的代码
2010/04/12 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
python连接池实现示例程序
2013/11/26 Python
Python人脸识别初探
2017/12/21 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
SQL Server面试题
2016/10/17 面试题
北京某公司的.net笔试题
2014/03/20 面试题
幼师自我鉴定范文
2013/10/01 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
社区包粽子活动方案
2014/01/21 职场文书
小学信息技术教学反思
2014/02/10 职场文书
大学生求职信范文
2014/05/24 职场文书
集中采购方案
2014/06/10 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
云台山导游词
2015/02/03 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers