浅谈js 防抖节流
防抖：在固定的事件，间隔内 不会执行我们的代码逻辑 除非某个时间段内 有事件触发 会再次延长 如果在某个时间段后没后触发 就在n秒后执行代码逻辑
我们用防抖实现一个函数的封装。
生活小例子：
比如说电梯的实现原理还有我们的手机啊电脑啊自动锁屏
我们通常按下电梯开门的时候，在某个时间段后 会自动关闭 比如说我们 在快要关闭的时候我们 我们再次按下 按钮 那么 这个电梯门的关闭就会重新延迟这个 事件 重新开始计算 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align:center;
}
.box {
width:80%;
height:400px;
border:1px solid #f00;
margin:0 auto;
}
</style>
</head>
<body>
<h2>防抖代码实现</h2>
<div class="box"></div>
</body>
<script>
var index=0;
var box=document.querySelector('.box');
function getAction(e) {
console.log('this:',this)
console.log('e:',e)
//ajax。。。。
index++;
//每次 都是让index自增1
box.innerHTML=index;
}
getAction();
//我们在这里调用防抖这个函数
box.onmousemove=debounce(getAction,2000)
//box.οnmοusemοve=getAction
//防抖函数
/*
* { function }func:代表对哪个高频函数进行防抖
* { number } wait:代表防抖的时间间隔
*/
//封装一个 防抖的函数
//这里面传入两个参数 第一个是我们要进行防抖的函数，第二个就是我们设置的延迟时间
function debounce(func,wait) {
//设置一个定时器
var timeout;
//返回一个函数 我们可以看到在这里我们用到了 闭包 可以说是 闭包无处不在
return function() {
var _this=this;
//声明一个arguments；类数组用于传递给函数的参数
var args=arguments;
//每次操作完毕再次调用的时候 需要先清除掉定时器 否则
clearTimeout(timeout)
timeout=setTimeout(function() {
//确保我们 拿到的就是这个 当前的这个函数 来实现防抖
func.apply(_this,args)
},wait)
}
}
</script>
</html>
节流： 有规律的去进行 不会受到外界因素 的影响 固定时间做固定的事情.
有两种实现方式
第一个是 ：时间戳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align:center;
}
.box {
width:80%;
height:400px;
border:1px solid #f00;
margin:0 auto;
}
</style>
</head>
<body>
<h2>节流代码实现--时间戳实现</h2>
<div class="box"></div>
</body>
<script>
var index=0;
var box=document.querySelector('.box');
function getAction() {
//ajax。。。。
index++;
box.innerHTML=index;
}
getAction();
//这个单词主要 是要是用来 实现节流的
box.onmousemove=throttle(getAction,5000)
//节流函数
/*
* { function }func:代表对哪个高频函数进行节流
* { number } wait:代表节流的时间间隔
* 节流有两种实现方式：时间戳方式，定时器方式
*/
function throttle(func,wait) {
var _this;
var args;
var previous=0; //记录历史时间戳
return function() {
var now=+new Date(); //生成一个当前的时间戳
args=arguments;
_this=this;
//用当前时间now减去历史时间previous大于wait，就会执行事件处理函数，并且更新历史时间
if(now-previous>wait) {
//执行事件处理函数
func.apply(_this,args)
//更新历史时间戳
previous=now;
}
}
}
</script>
</html>
第二个是：定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align:center;
}
.box {
width:80%;
height:400px;
border:1px solid #f00;
margin:0 auto;
}
</style>
</head>
<body>
<h2>节流代码实现--定时器实现</h2>
<div class="box"></div>
</body>
<script>
var index=0;
var box=document.querySelector('.box');
function getAction() {
//ajax。。。。
index++;
box.innerHTML=index;
}
getAction();
box.onmousemove=throttle(getAction,2000)
//节流函数
/*
* { function }func:代表对哪个高频函数进行节流
* { number } wait:代表节流的时间间隔
* 节流有两种实现方式：时间戳方式，定时器方式
*/
function throttle(func,wait) {
var timeout;
var args;
var _this;
return function() {
_this=this;
args=arguments;
if(!timeout) {
timeout=setTimeout(function() {
func.apply(_this,args)
timeout=null;
},wait)
}
}
}
</script>
</html>