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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
Open and Print a Word Document
Jun 15 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
JS实现随机点名器
Apr 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
PHP中的正规表达式(二)
2006/10/09 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
Python中的字典遍历备忘
2015/01/17 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
篮球比赛拉拉队口号
2014/06/10 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
创业计划书之餐饮
2019/09/02 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
MySQL分区表实现按月份归类
2021/11/01 MySQL