JS中的防抖与节流
什么是防抖？and什么是节流？一起来开心的学习下吧。
首先什么是防抖：就是在一定的时间内事件只发生一次，比如你点击button按钮，1秒内任你单身30年手速点击无数次，他也还是只触发一次。举个例子，当你在页面中使用onkeyUp监听用户在input框中的输入，如果用户按住一个6不放，那监听事件岂不是一直被触发，这样就浪费了一部分性能了，那么我们在一定事件内监听，也就是说我过了一秒再来看看你输入了多少个6，那这样是不是轻松多了。ok，解释清楚了那么就来看下代码，更加清晰。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>防抖</title>
</head>
<body>
<button id="debounce">防抖，防抖，防抖</button>
<script>
window.onload = function () {
let obtn = document.getElementById('debounce'); //获取按钮
obtn.addEventListener('click',debounceHandle(debounce),false); //监听绑定事件
} //防抖函数
function debounceHandle (fn) {
let timer = null;
return function () {
clearTimeout(timer); //如果存在事件就清除定时器
timer = setTimeout(function(){ //如果不存在那么就开启定时器
fn.call(this,arguments);
},300)
}
} //执行函数
function debounce() {
console.log('防抖，防抖，防抖');
}
</script>
</body>
</html>
上面函数也就是在300毫秒内，只会触发一次事件。总结：防抖就是在任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
接下来什么是节流，假如在一个页面中有任意多张图片，那么就有可能会使用懒加载技术，懒加载呢就是监听滚动条的位置，那么如果用户一直在滚动，那么事件监听就一直在触发，也是浪费性能。那么节流就是在一定时间间隔内触发一次事件。话不多说，先看代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节流</title>
<style>
div {
height: 5000px;
}
</style>
</head>
<body>
<div>节流,节流,节流</div>
<script>
window.onload = function () {
window.addEventListener('scroll',throttleHandle(throttle),false); //监听绑定事件
} //节流函数
function throttleHandle (fn) {
let timer = null,
booleanVal = true; // 声明一个变量标志做判断
return function () {
if (!booleanVal) {
return
} //如果事件正在执行，那么就返回，将布尔值改为false
booleanVal = false;
//事件未执行，创建事件
timer = setTimeout(function() {
fn.apply(this,arguments);
booleanVal = true; //事件执行完将布尔值改回
},300)
}
} //执行函数
function throttle() {
var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollNum);
}
</script>
</body>
</html>
这样，在某些特定的工作场景，我们就可以使用防抖与节流来减少不必要的损耗。最后提一个问题，上句提到造成不必要的损耗，那么请问是什么损耗呢？
JS中的防抖与节流的更多相关文章
- Js中的防抖与节流函数
1.何为防抖与节流函数呢? 1.防抖(debounce):通过setTimeout方式,在一定的时间间隔内,将多次触发的事件转化为一次触发.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于 ...
- JS中的防抖和节流
JS-防抖和节流 在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和 ...
- JavaScript中函数防抖、节流
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- JavaScript 中的防抖和节流
什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...
- JS简单实现防抖和节流
一.什么是防抖和节流 Ps: 比如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,那得消耗多大的服务器资源,即使你的服务器资源很强大,也不带这么玩的. 1. 防 ...
- 来聊聊JavaScript中的防抖和节流
目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...
- 输入防抖 vue # 输入搜索的时候 及时搜索的快速访问接口的 解决方案 vue 中使用防抖和节流
输入防抖 watch: { value (newVal, oldVal) { if (this.timer) { clearTimeout(this.timer) } this.timer = set ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- 2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 ...
随机推荐
- 自制基于HMM的python中文分词器
不像英文那样单词之间有空格作为天然的分界线, 中文词语之间没有明显界限.必须采用一些方法将中文语句划分为单词序列才能进一步处理, 这一划分步骤即是所谓的中文分词. 主流中文分词方法包括基于规则的分词, ...
- flex弹性布局学习总结
本文首次发布在我的个人博客:Claiyre的个人博客 https://claiyre.github.io/ 博客园地址:http://www.cnblogs.com/nuannuan7362/如需转载 ...
- GCD之同步异步
博客地址:http://blog.csdn.net/chaoyuan899/article/details/12554603
- .38-浅析webpack源码之读取babel-loader并转换js文件
经过非常非常长无聊的流程,只是将获取到的module信息做了一些缓存,然后生成了loaderContext对象. 这里上个图整理一下这节的流程: 这一节来看webpack是如何将babel-loade ...
- [转]Easily Add a Ribbon into a WinForms Application
本文转自:https://www.codeproject.com/articles/364272/easily-add-a-ribbon-into-a-winforms-application-cs ...
- 读取XML某一节点
先看XML文档: <?xml version="1.0" encoding="utf-8" ?> <NewDataSet> <Ta ...
- Redis——基础数据结构
Redis提供了5种基础数据结构,分别是String,list,set,hash和zset. 1.String Redis所有的键都是String.Redis的String是动态字符串,内部结构类似J ...
- python序列函数
zip:序列并行处理 >>> name=['ghostwu','wukong','bajie'] >>> age=['] >>> sex=['ma ...
- POJ1222(SummerTrainingDay01-E)
EXTENDED LIGHTS OUT Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 11078 Accepted: 7 ...
- 5月23日——SPA单页面应用的原理
一.什么是SPA(SPA 的概念) 单页 Web 应用 (single-page application 简称为 SPA),简单理解为:仅仅在web页面初始化时加载相应的HTML.JavaScript ...