关于防抖与节流的思考
时间:2019-08-22
本文章向大家介绍关于防抖与节流的思考,主要包括关于防抖与节流的思考使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
百度防抖与节流,一直没搞懂防抖与节流的区别,然后google了一下,(google大法好
_(:з」∠)_)个人理解了一下
1,比较正式的解释他们的区别:
防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间,防抖注重结果
节流::是让一个函数无法在很短的时间间隔内连续调用,当上一次执行完之后过了规定的时间间隔,才能进行下一次的函数调用,节流注重过程
2,非官方解释
防抖:A打了一个B一下,B开始哭(假设哭5分钟),在这5分钟内A一直打,而B就只为哭A打的第一下,其他的从第二次开始,B就像练了金钟罩一样,抗打ƪ(˘⌣˘)ʃ,但是这5分钟过了之后金钟罩没了,需要A重新打一次,让B哭出来才重新生成金钟罩
节流:这就有点像鬼畜了,A一直打,B一直哭,但是每次都是重新哭,类似于诸葛亮说 ‘竟然有如此厚颜无耻之人’,那么我们在暂停与播放之间快速切换就会出现 ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘竟然’ ‘有如此厚颜无耻之人’;
3,应用场景
防抖:窗口 resize时,搜索时需要根据输入框中的内容发送ajax请求时。。。。。。
节流:滚动条到达底部(比如要做加载更多)。。。。。。
4,程序实现:
//节流 let time; let per = 200; //这个是间隔时间,即事件触发到事件回调开始执行的间隔时间。根据业务需求决定 function throtting(){ if(time){ clearTimeout(time) } time = setTimeout(function(){ //事件回调的具体方法 },per) } //防抖 let timelength=2000;//即在2秒内自第二次开始的其他事件触发都将被忽略 let lasttime = null;//上一次执行的时间点 function debounce(){ if(!lasttime){ lasttime = new Date().getTime() }else{ let curenttime=new Date().getTime(); if(curenttime - lasttime>2000){ //事件回调的具体方法 //需将上一次的时间更新↓ lasttime = curenttime }else{ //时间不够,不做任何操作 return false } } }
原文地址:https://www.cnblogs.com/tony-stark/p/11393822.html
- 什么是人?人工智能的发展已经逼迫人类思考这样的问题
- 加法生产
- Web 前端利器Emmet 的HTML用法总结
- Web 前端利器Emmet 的CSS 用法总结
- 响应式 HTML 邮件制作之三个实例
- java知识点归纳
- EaseMobile 主题导航菜单设置小图标的方法(图文+视频教程)
- NEC css规范
- DW Mobile Switcher:移动设备识别切换主题插件
- 揭秘技术大国以色列
- mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离
- wp_nav_menu 函数经Walker_Nav_Menu 类自定义导航菜单HTML
- css3 RGBA 红色R+绿色G+蓝色B+Alpha通道
- css3 gradient 渐变
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- gitalk 自动初始化
- 给hexo申请证书并设置https
- Python 面向对象-如何查看类的父类,外部如何获取类的名字
- Python操作excel:用xlwt设置excel单元格背景颜色,给字体加粗。【附】颜色表
- Python+selenium 自动化-获取当前页面的url地址,打开指定的url地址
- PyQt5 技术篇-窗口置顶不生效解决办法,setWindowFlags()设置不生效解决办法
- 使用hooks自动监测git仓库更改并拉取
- 重新部署hexo
- 关于前端哈希加密密码的思考
- PyQt5 技术篇-设置下拉框默认值,获取当前选择的内容
- 杜绝重复-ssh-key
- 修改hexo生成的文件链接及图片资源链接
- PyQt5 技术篇-下拉框绑定监听事件
- curl常用命令
- Python 技术篇-文件操控:删除本地文件、文件夹。判断文件、文件夹是否存在方法