淺談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>