JS防抖和节流模式的实际应用
生活随笔
收集整理的這篇文章主要介紹了
JS防抖和节流模式的实际应用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
防抖
首先我們先講講防抖，一個時間在n秒內(nèi)觸發(fā)了很多次，我們只執(zhí)行一次，總之就是等事件觸發(fā)完n秒不再觸發(fā)，才執(zhí)行
/**
* @desc 函數(shù)防抖
* @param func 函數(shù)
* @param wait 延遲執(zhí)行毫秒數(shù)
*/
functiondebounce(func, wait) {
let timeout;
return function() {
let context = this; // this指向
let args = arguments;
if(timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context);
}, wait);
}
}
下面讓我們開嘗試調(diào)用一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="inputDom"/>
</body>
</html>
<script type="text/javascript">
var content = document.getElementById('inputDom');
function press() {
console.log("開始輸入了");
}
content.debounce= function (){
throttle(press, 500);
}
</script>
可以看到，當連續(xù)輸入內(nèi)容，在500毫秒內(nèi)只發(fā)一次，這就達到了防抖的效果了。
節(jié)流
持續(xù)觸發(fā)某一事件，每隔n秒執(zhí)行一次。關于節(jié)流的實現(xiàn)，有兩種主流的實現(xiàn)方式，一種是使用時間戳，一種是設置定時器。
使用定時器
/**
* @desc 函數(shù)節(jié)流
* @param func 函數(shù)
* @param wait 延遲執(zhí)行的毫秒數(shù)
*/
function throttle(func, wait) {
let timeout;
return function() {
let context = this;
let args = argumetns;
if(!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
使用時間戳
/**
* @desc 函數(shù)節(jié)流
* @param func 函數(shù)
* @param wait 延遲執(zhí)行的毫秒數(shù)
*/
function throttle(func, wait) {
let previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if(now - previous >wait) {
func.apply(context, args);
previous = now
}
}
}
總結(jié)
以上是生活随笔為你收集整理的JS防抖和节流模式的实际应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 青年男性如何提高性生活能力
- 下一篇： 梦到大蟒蛇（梦到到处都是蟒蛇）