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 域名解析 ...
随机推荐
- APIO 2018 游记
上接CTSC 2018 游记 day1 早上大概八九点起来洗了个澡跑到隔壁寝发现 tj 还在??? 原来昨天晚上听错名字了... 下午一起去 wfj 王府井玩,陪李总逛逛奢侈品店... 走了两三个小时 ...
- linux 安装mysql8.0
linux下安装mysql8.0 下载mysql $ wget http://mirrors.ustc.edu.cn/mysql-ftp/Downloads/MySQL-8.0/mysql-8.0.4 ...
- PHP实现批量删除（封装）
前台 <!DOCTYPE html> <html> <head> <title>批量删除</title> </head> < ...
- js-ES6学习笔记-Promise对象
1.Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. 2.所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作) ...
- ajax请求json数据跨域问题（转）
一.后台代理技术 由服务器端向跨域下的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 具体操作如下: 1.在localhost:81/a.html中,向同源下的某个代理程序发出请求 $ ...
- 解决The type 'ASP.global_asax' exists in both ASP.global_asax同时存在问题
习惯发布站点的同学有时候可能遇见以下错误 这是发布时[预编译勾选/不勾选]产生的文件冲突导致的 如果不勾选预编译会发布以下代码 如果勾选预编译会发布以下代码 错误就在于此,如果非预编译Global.a ...
- 图片轮播(Jquery)
昨天在博客园里面看到imwtr写的图片轮播(淡入淡出)的文章,觉得是否自己可以将该功能写成Jquery插件的形式,也方便之后如果需要的时候可以直接使用. 经过调整和整合,完成了第一版本的jquery. ...
- atitit.交换机 汇聚上联、网络克隆和标准共享的原理与区别
atitit.交换机 汇聚上联.网络克隆和标准共享的原理与区别 1. 标准共享(标准化模式)1 2. 汇聚上联trunk1 2.1. 使用场合1 2.2. 背景1 2.3. 实现原理2 3. 网络克隆 ...
- JavaScript判断变量名是否存在数组中
直接上代码: JavaScript代码: var array=[{name:"张珊",sex:"男"}]; console.log(array); if(arr ...
- Android Studio 一个完整的APP实例（附源码和数据库）
前言: 这是我独立做的第一个APP,是一个记账本APP. This is the first APP, I've ever done on my own. It's a accountbook APP ...