JavaScript 中函数节流和函数去抖的讲解
JavaScript 中函数节流和函数去抖的讲解
我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所以在处理类似的情况时,可以考虑使用函数节流和函数去抖来解决,至于具体使用哪一种方式,根据实际情况分析定夺,先来讲解一些这两者的概念
函数节流:在频繁触发的情况下,需要执行的逻辑只有执行完之后,才能继续执行下一次
函数防抖:在频繁触发的情况下,只有足够的空闲时间,才执行代码一次,如果没有执行完就清除掉,重新执行逻辑
应用场景:高频触发以下方法
- 页面滚动监听(onscroll)
- 窗口resize事件,等到窗口变化结束后才进行业务逻辑的运行
- 鼠标键盘 mousedown/keydown 事件
- 鼠标的进入移出事件(mouseenter/mouseleave)
- DOM 元素的拖拽功能实现(mousemove)
- 输入框搜索等(keyup)
函数节流和函数防抖两个概念是有很大区别的,我们用一段代码示例来看看其究竟
// 函数节流例子
var can = true;
window.onscroll = function(){
if(!can){
//判断上次逻辑是否执行完毕,如果在执行中,则直接return
return;
}
can = false;
setTimeout(function(){
//执行逻辑
can = true;
}, 100);
};
可以看出上一次的逻辑必须执行完毕之后,才会执行下一次的逻辑,如果我们不做函数节流,因为滚动是一个频繁的操作,会被时时刻刻监听到,执行多次逻辑的触发,做了节流会在一定程度上控制逻辑的触发
// 函数防抖
var timer = null;
window.onscroll = function(){
if (timer) {
// 清除未执行的逻辑,重新执行下一次逻辑,不论上一次是否执行完毕
clearTimeout(timer);
}
timer = setTimeout(function(){
//执行逻辑
}, 300);
};
在函数防抖这个例子中,可以看出当事件被监控触发时候,不论上一次的逻辑有没有执行完毕,都要清除掉重新执行,函数防抖会更加降低事件被触发的频率。
真实使用案例讲解:在一个列表页面,当鼠标进入到列表中某一项时显示一段tip提示语(提示语的内容需要请求接口获得),移出时隐藏提示语框。(提示语是当前列表项的相关内容)
图示:这样一整个列表,当我们鼠标放到订正情况上时候需要显示订正情况的详细信息,而有时我们鼠标滑过的时候可能把每一条的逻辑都触发,但是这并不是我们想要的,我们只想最后鼠标留在哪条数据上,才显示哪一段数据的逻辑,所以根据情况的分析,我们这种情况适用的是函数去抖
实现效果图
代码书写
<!--html 一段mvvm框架的dom书写-->
<td ms-mouseenter="toggleItem(true,item)" ms-mouseleave="toggleItem(false,item)">
<span>{{item.info}}</span>
<div ms-class="show:item.isVisible">
<p>item需要显示的内容</p>
</div>
</td>
var event = null,
toggleItem:function (state,item) {
if (state==true) {
if (event) {
clearTimeout(event);
}
event =setTimeout(function () {
//执行item的请求显示内容逻辑
},100);
}
item.isVisible = state;
},
写在最后的总结
所以最重要的事情就是要首先清楚地区分二者的概念,理解实现的方法,再根据具体的需求来判断适用哪一种方法来进行优化,二者在功能实现上是有本质区别的。
Cayley 一个不断努力学习的女程序员
JavaScript 中函数节流和函数去抖的讲解的更多相关文章
- javascript中的函数节流和函数去抖
带着问题去尝试 首先我们要知道为什么要用到函数节流和函数去抖?我们带着以下的疑问来进行分析! 1.比如搜索框,你会用到什么事件(change.blur.keyup等)?去做什么效果?2.再比如scro ...
- JavaScript 函数节流和函数去抖应用场景辨析
概述 也是好久没更新 源码解读,看着房价蹭蹭暴涨,心里也是五味杂陈,对未来充满恐惧和迷茫 ...(敢问一句你们上岸了吗) 言归正传,今天要介绍的是 underscore 中两个重要的方法,函数节流和函 ...
- js 函数节流throttle 函数去抖debounce
1.函数节流throttle 通俗解释: 假设你正在乘电梯上楼,当电梯门关闭之前发现有人也要乘电梯,礼貌起见,你会按下开门开关,然后等他进电梯: 但是,你是个没耐心的人,你最多只会等待电梯停留一分钟: ...
- 【javascript】js中的函数节流和函数防抖
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- javaScript函数节流与函数防抖
javaScript函数节流与防抖之区别 函数防抖(debounce)与函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟.假死或卡顿 ...
- [转]Javascript中的自执行函数表达式
[转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...
- 深入理解javascript中的立即执行函数(function(){…})()
投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...
- 使用Ajax在javascript中调用后台C#函数
使用Ajax在javascript中调用后台C#函数 最近一段时间在紧跟一个网站的项目,数据库中用户表的UserName要求是唯一的,所以当用户选定一个用户名进行注册时要首先检查该用户名是否已被占用, ...
随机推荐
- 路径方案数_mod_SPFA_记忆化搜索_C++
本文含有原创题,涉及版权利益问题,严禁转载,违者追究法律责任 本来是写个 DP 分分钟就 A 了,结果老师要我们写记忆化搜索(无奈脸) 算啦,随手一改又是一个标准的记忆化搜索(目测好像是记忆化搜索容易 ...
- shell整数加法
http://blog.csdn.net/ll_0520/article/details/5959577 #plus #!/bin/sh let a=$1+$2 b=$[$1+$2] ((c=$1+$ ...
- vim 源码分析
vim 源码分析 http://bbs.csdn.net/topics/230031469 Ver7.1 晕.看不明白很正常. 7.1已经很大了. 支持了太多东西. 代码行数那么多(源码压缩了都 ...
- gdrive无限网盘挂载systemd文件
我的博客新地址:www.liuquanhao.com --------------------------------------------------------------------- 首先应 ...
- 记录一次lnmp故障报告
业务架构图: nginx 状态监控图: 本次故障的表现为:前端php页面无法打开,空白页或者502错误. nginx中php配置如下: location ~ \.php$ { root /xxx/xx ...
- solr in action 第三章
document: 每个document由一个或者多个域(field)组成,每个域都有自己的类型:string, text, etc. 理论上域的类型有无限多个,因为一个域的类型可以由零个或多个分析阶 ...
- AC日记——病毒侵袭 hdu 2896
2896 思路: 好题: 代码: #include <queue> #include <cstdio> #include <cstring> using names ...
- React Native - 1 Windows下的环境配置(Windows+Android)
参考:https://facebook.github.io/react-native/docs/getting-started.html(要FQ) 网站上建议使用Chocolatey去配环境, ...
- flutter 频道切换
https://github.com/flutter/flutter/wiki/Flutter-build-release-channels 频道说明页 https://flutter.dev/doc ...
- HDU3414 Tour Route(竞赛图寻找哈密顿回路)
链接:http://acm.hdu.edu.cn/showproblem.php?pid=3414 本文链接:http://www.cnblogs.com/Ash-ly/p/5459540.html ...