web项目开发之JS函数防抖与节流示例代码
目录
- 防抖
- 引入
- 防抖场景1(鼠标移入)
- 防抖场景2(键盘按键)
- 函数节流
防抖
经典应用常见: 手风琴效果
引入
没有做防抖的网站:
做了防抖的网站:
防抖场景1(鼠标移入)
抖动 ： 用户本来不想触发这个交互，但是由于鼠标不小心抖动误触发交互事件。
例子： 想看第五张图片，。不想看2 3 4张。 但是鼠标从第1张滑到第五张时候，不小心放在了2 3 4上面。误触发。
函数防抖 ： 用户连续多次触发某个事件，则只执行最后一次。
解决原理: 开启定时器，间隔时间内如果多次触发事件，则每一次都清除上一次定时器。
实例及解决代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>动画-案例《手风琴》</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 2400px;
}
#box {
width: 1200px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
}
#box li {
width: 100px;
height: 400px;
float: left;
transition: all 0.5s ease-out;
}
#box li.over {
width: 800px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="(item,index) in list" :class="{over:overIndex == index}" @mouseenter="doEnter(index)">
<img :src="item" alt="">
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el:'#box',
data:{
overIndex:0,
list:[
'./images/collapse/1.jpg',
'./images/collapse/2.jpg',
'./images/collapse/3.jpg',
'./images/collapse/4.jpg',
'./images/collapse/5.jpg',
],
timeID:null
},
methods: {
doEnter(index){
/* 开启防抖 */
//1.1 先清除上一次定时器，以本次为准
clearTimeout(this.timeID)
//1.2 开启定时器（防抖间隔）
this.timeID = setTimeout(()=>{
this.overIndex = index;
},500)
}
},
})
</script>
</body>
</html>
防抖场景2(键盘按键)
经典应用场景: 搜索联想词
-开发中, 该功能后端会使用中间件"OpenSearch"或者"Elasticsearch", 后端的逻辑处理会十分高效、快捷.
-此处只是基于前端的角度, 从减少http请求这个方面出发来进行优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入搜索内容">
<script>
let timeID = null;
document.querySelector('input').oninput = function(){
/* 函数防抖 */
//(1)先清除以前的定时器
clearTimeout(timeID)
//(2)开启防抖定时器
timeID = setTimeout(() => {
console.log( this.value );
}, 500);
}
</script>
</body>
</html>
函数节流
概念: 解决高频事件带来的性能问题;高频事件： 在页面中，有些事件触发频率非常的高。
例如: 鼠标移动，滚轮事件。
解决原理: 用户连续多次触发事件，指定时间内只会触发一次
实例及解决代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
height: 3000px;
}
</style>
</head>
<body>
<script>
let lastTime = null;
let i = 1;
window.onmousemove = function(){
/* 函数节流 */
//(1)判断两次触发事件的时间间隔
let time = Date.now()
if( time - lastTime >= 500 ){
console.log('鼠标移动次数：' + i++);
//(2)本次触发时间作为下一次参考间隔
lastTime = time
}
}
// let j = 1;
// window.onscroll = function(){
// //(1)判断两次触发事件的时间间隔
// let time = Date.now()
// if( time - lastTime >= 500 ){
// console.log('鼠标滚动次数：' + j++);
// //(2)本次触发时间作为下一次参考间隔
// lastTime = time
// }
// }
</script>
</body>
</html>
以上就是web项目开发之JS函数防抖与节流示例代码的详细内容，更多关于web项目JS函数防抖与节流的资料请关注我们其它相关文章！
相关推荐
-
JS函数节流和函数防抖问题分析
问题1:如果实现了dom拖拽功能,但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数,导致浏览器直接卡死,这个时候怎么办? **问题2:**如果给一个按钮绑定了表单提交的post事件,但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交,如何防止多次提交的发生? 为了应对如上场景,便出现了 函数防抖 和 函数节流 两个概念,总的来说: 这两个方法是在 时间轴上控制函数的执行次数. 函数防抖(debounce) 概念: 在事件被触发n秒后再执行回调,如果在这n秒内
-
JavaScript函数节流和函数防抖之间的区别
一.概念解释 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段. 大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变化,当高频率的扫描,人类是感觉不出来的.反而形成一种视觉效果,就是一张图.就像高速旋转的风扇,你看不到扇叶,只看到了一个圆一样. 同理,可以类推到js代码.在一定时间内,代码执行的次数不一定要非常多.达到一定频率就足够了.因为跑得越多,带来的效果也是一样.倒不如,把js代码的执行次数控制在合理的范围.既
-
一文看懂如何简单实现节流函数和防抖函数
前言 在日常开发中有很多场景我们都需要用到节流函数和防抖函数,比如:实现输入框的模糊查询因为需要轮询ajax,影响浏览器性能,所以需要用到节流函数:实现手机号.姓名之类的的验证,往往我们只需要验证一次,这个时候我们就需要用到防抖函数:但是网上的很多资料都是不够具体和便于理解.今天自己翻阅了一些资料之后,来简单的谈谈我对节流函数和防抖函数的理解,希望能帮助大家理解: 节流函数 顾名思义,就是节省流量节省内存性能的一种函数,可以理解为是一种性能优化方案: 举个例子:一个水龙头一直在滴水,可能一次性会
-
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
前言 有echarts使用经验的同学可能遇到过这样的场景,在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的,resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的.还有一个常见的场景在input标签的input事件里请求后端接口,input事件也是连续触发的,假设我输入了"12"就会请求两次接口参数分别是"1"和"12",比浪费网络资源更要命的是如果参数为&quo
-
vue函数防抖与节流的正确使用方法
前言 1.防抖(debounce):触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间 举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发. 节流(thorttle):高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率 举例:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行.就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新
-
web项目开发之JS函数防抖与节流示例代码
目录 防抖 引入 防抖场景1(鼠标移入) 防抖场景2(键盘按键) 函数节流 防抖 经典应用常见: 手风琴效果 引入 没有做防抖的网站: 做了防抖的网站: 防抖场景1(鼠标移入) 抖动 : 用户本来不想触发这个交互,但是由于鼠标不小心抖动误触发交互事件. 例子: 想看第五张图片,.不想看2 3 4张. 但是鼠标从第1张滑到第五张时候,不小心放在了2 3 4上面.误触发. 函数防抖 : 用户连续多次触发某个事件,则只执行最后一次. 解决原理: 开启定时器,间隔时间内如果多次触发事件,则每一次都清除上
-
如何解决js函数防抖、节流出现的问题
React中使用防抖函数和节流函数 在React事件调用时,React传递给事件处理程序是一个合成事件对象的实例.SyntheticEvent对象是通过合并得到的. 这意味着在事件回调被调用后,SyntheticEvent 对象将被重用并且所有属性都将被取消. 这是出于性能原因. 因此,您无法以异步方式访问该事件.React合成事件官方文档 所以在用防抖或节流函数封装时,异步方式访问事件对象出现问题.解决的方法如下: 方法一:调用合成事件对象的persist()方法 event.persist
-
android开发之Json文件的读写的示例代码
Json格式是常见的读写形式.读写Json文件也是常用的操作. 这次来实践一下Json文件的读写. 首先在SD卡上的读写权限是一定要申请的.那么还是老办法,在 AndroidManifest.xml 文件中添加 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 这在android 6.0 以下的系统就足够了.6.0及以上的更新的系统,在代码中需要申请SD卡的读写权限. 先
-
解析SpringBoot项目开发之Gzip压缩过程
为了减少数据在网络中的传输量,从而减少传输时长,增加用户体验,浏览器大都是支持Gzip压缩技术的,http的请求头 Accept-Encoding:gzip, deflate 就表示这次请求可以接受Gzip压缩后的数据,图片不要进行压缩,因为图片完全可以在项目开发中使用压缩后的图片.压缩会有一定的CPU性能损耗. 下面介绍几种 Gzip压缩方式 1.SpringBoot开启Gzip压缩 在application.properties中加入如下配置: server.compression.enab
-
详解JS函数防抖
一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如果电梯检测到有人进来(触发事件),就会多等待 10 秒,此时如果又有人进来(10秒之内重复触发事件),那么电梯就会再多等待 10 秒.在上述例子中,电梯在检测到有人进入 10 秒钟之后,才会关闭电梯门开始运行,因此,"函数防抖"的关键在于,在 一个事件 发生 一定时间 之后,才执行 特定动
-
如何理解JS函数防抖和函数节流
概述 函数防抖和函数节流都是定义一个函数,该函数接收一个函数作为参数,并返回一个添加了防抖或节流功能后的函数. 因此可以将函数防抖和函数节流看作是一个函数工厂,负责对传进来的函数进行相应的加工改造,然后产出一个新的带有某种功能的函数. 函数防抖是某一时间内只执行一次,而函数节流是间隔时间执行 假如有这样一个场景:在某一页面,有一个按钮是 "加载更多",这个按钮的作用就是使用 ajax 从后端服务器请求更多的数据展示在页面,我们都知道,ajax 请求的响应是一个异步的,会存在一定的响应时
-
Android程序开发之Fragment实现底部导航栏实例代码
流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏. 说明 IDE:AS,Android studio; 模拟器:genymotion; 实现的效果,见下图. 具体实现 为了讲明白这个实现过程,我们贴出来的代码多一写,这样更方便理解 [最后还会放出完整的代码实现] .看上图的界面做的比较粗糙,但实现过程的骨架都具有了,想要更完美的设计,之后自行完善吧 ^0^. 布局 通过观察上述效果图,发现任意一个选项页面都有三部分组成: 顶部去除ActionBar后的标题栏: 中间一个Fragment
-
IOS 开发之ios视频截屏的实现代码
IOS 开发之ios视频截屏的实现代码 现在好多视频截屏软件,这里提供一个IOS 视频截屏的方法,大家可以参考下, 实现代码: //截屏 static int i=0; -(IBAction)screenShot:(id)sender{ UIGraphicsBeginImageContextWithOptions(CGSizeMake(640, 960), YES, 0); [[self.window layer] renderInContext:UIGraphicsGetCurrentCont
-
浅析JavaScript 函数防抖和节流
函数防抖和节流都是对高频动作触发回调函数的一个优化,实现方式上有类似之处.先从使用场景做个区分. 防抖使用场景: 表单输入框校验 提交按钮避免重复提交 节流使用场景: scroll,mousemove,resize等 函数防抖(debounce) 表单输入框校验在用户不停的打字输入时并不需要向后台校验文本,只有当用户停下来一定时间后,这时候默认用户已经输入完毕了可以开始向后台提交文本了. 表单的提交按钮被用户多次连续点击时,显然并不需要每次点击都提交表单.仅在用户不点击之后,把最后一次的点击操作