當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

JS防抖和节流模式的实际应用

發(fā)布時間：2024/5/24 综合教程 41 生活家

生活随笔收集整理的這篇文章主要介紹了 JS防抖和节流模式的实际应用小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

防抖

首先我們先講講防抖，一個時間在n秒內觸發(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);

　　}

　　下面讓我們開嘗試調用一下

<!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ù)輸入內容，在500毫秒內只發(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
        } 
    }
    
}

總結

以上是生活随笔為你收集整理的JS防抖和节流模式的实际应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。