溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近看了函數節流的相關內容，具體什么是節流我不討論了，網上很多，這里總結下兩個方法，我只認可其中一個。另一個貌似也能達到節流的效果但是感覺不是很正規。
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函數節流</title>
<style>
div{
font-size:40px;
color:red;
text-align: center;
}
</style>
</head>
<body>
<div>0</div>
<script>
var a=0;
var oDiv=document.getElementsByTagName('div')[0];
var throttle=function(fn,wait){
var startTime=new Date();
return function(){
var arg=arguments;
var context=this;
var curTime=new Date();
// 如果達到了規定的觸發時間間隔，觸發 handler
var remaing=wait-(curTime-startTime)
if(remaing<=0||remaing>wait){//按理說remaing足夠證明已經到了時間間隔，但是為了防止客戶端修改了時間所以加個條件(為什么這么加我也不懂)
fn.apply(context,arg);
startTime=curTime;
}
};
};
window.onmousemove=throttle(function(){
a++;
oDiv.innerText=a+"";
},2000);
</script>
</body>
</html>
我比較認可這個方法，另外這是簡潔版，還有一種可以是這樣子的
function throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果達到了規定的觸發時間間隔，觸發 handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 沒達到觸發間隔，重新設定定時器
} else {
timeout = setTimeout(function(){
fun.apply(context, args);
}, delay);
}
};
};
就是在判斷完時間間隔后再加個計時器來延遲，這個我覺得加不加都行，加了也沒錯跟時間判斷互補，不加也能實現節流的效果。
第二類寫法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函數節流</title>
<style>
div{
font-size:40px;
color:red;
text-align: center;
}
</style>
</head>
<body>
<div>0</div>
<script>
var a=0;
var oDiv=document.getElementsByTagName('div')[0];
var throttle=function(fn,time){
var timer=null;
return function(){
var arg=arguments;
var context=this;
if(timer){
return false;
}
else{
timer=setTimeout(function(){
clearTimeout(timer);
timer=null;
fn.apply(context,arg);
},time);
}
};
};
window.onmousemove=throttle(function(){
a++;
oDiv.innerText=a+"";
},2000);
</script>
</body>
</html>
這種寫法通過判斷是否存在正在進行的計時器來決定是否執行函數，存在就結束運行函數，但是那個計時器仍在隊列里進行實踐一到還會執行，通過運行也能達到節流，也就是間隔固定的時間觸發函數，但是我就是不太喜歡這種寫法。可能是這種方法沒第一種直接吧。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
