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 域名解析 ...
随机推荐
- SQL语句大全从基础到熟练（不含数据库高端操作）日常用户 三、
前言 昨天晚上回家忘记带钥匙导致在楼下站街三小时,鬼天气热的不要不要的然后我就在车里坐了会之后就.....zzZZ,哈哈睡的挺香的毕竟累了一天了 上两篇文章都是介绍的语法语句,本篇文章介绍下函数的使用 ...
- thinkphp 返回上一页的两种方式
<div > <a class="details_back" href="{:U('Admin/SinglePageManagement/index') ...
- 新版TeamTalk部署教程
新版TeamTalk部署教程 新版TeamTalk已经在2015年03月28日发布了,目前版本定为1.0.0版本,后续版本号会按照如下规则进行:1.版本规则按照x.y.z的形式进行.2.各端小bug修 ...
- 在 CentOS7 上安装 RabbitMQ 消息队列中间件
RabbitMQ 是流行的开源消息队列系统,是 AMQP(Advanced Message Queuing Protocol 高级消息队列协议)的标准实现,用 erlang 语言开发.RabbitMQ ...
- 通过这些示例快速学习Java lambda语法
对于那些不熟悉函数式编程的人来说,基本的Java lambda语法起初可能有点令人生畏.但是,一旦将lambda表达式分解为它们的组成部分,语法很快就会变得有意义并变得非常自然. Java中lambd ...
- 什么是Solr
什么是Solr Lucene复习: 1.什么是lucene:全文检索工具包 2.Lucene的工作原理: 索引数据的创建 从原始文件中提取一些可以用来搜索的数据(封装成各种Field),把各field ...
- @ModelAttribute注解详解
@ModelAttribute注解详解 1.@ModelAttribute定义: 被该注解定义的方法,会在该方法所在的controller的任何目标方法执行之前执行 2.@ModelAttribute ...
- Linux常用基本命令(rename,basename,dirname)
rename:重命名文件, 我下面的操作是在ubuntu16.04发行版 演示的,centos下面的语法有些不同 1,首先,生成1到100命名的.html后缀的文件 ghostwu@dev:~/lin ...
- python变量作用域,函数与传参
一.元组传值: 一般情况下函数传递参数是1对1,这里x,y是2个参数,按道理要传2个参数,如果直接传递元祖,其实是传递一个参数 >>> def show( x, y ): ... p ...
- JavaScript 事件处理机制
DOM 事件流 DOM 是一个树型结构,当一个HTML元素产生一个事件时,该事件会在该元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件流.而事件传播的 ...