节流的实现

亦凉 2022-04-08 15:28 154阅读 0赞

> 在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作，资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流throttle就为了解决类似需求应运而生的。

> 场景：  
> 窗口调整（resize）  
> 页面滚动（scroll）  
> 抢购疯狂点击（mousedown）

上代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>节流</title>
    </head>
    <body>
    	<div id='show'>0</div>
    	<button id='btn'>点击</button>
    </body>
    <script>
    	var oDiv = document.getElementById('show');
    	var oBtn = document.getElementById('btn');
    
    	function throttle(handler,wait) {//节流函数，运行函数和等待时间
    		var lastTime = 0;
    		return function (e){
    			//arguments[0] = event
    			var nowTime = new Date().getTime();
    			if(nowTime - lastTime > wait){
    				//handler();
    				handler.apply(this,[arguments[0]]);//需要改变this指向，来获取事件对象，要不然buy中输出的this就是指向window,e就是undefined
    				lastTime = nowTime;
    			}
    		}
    
    	}
    	function buy(e){
    		console.log(this,e);
    		oDiv.innerText = parseInt(oDiv.innerText) + 1;
    	}
    	oBtn.onclick = throttle(buy,1000)
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现一个节流

节流函数通常用于限制函数在指定时间内只能调用一次，以节省资源。例如，在页面的滚动事件中，您可能希望仅在用户停止滚动一段时间后才执行函数，而不是每次滚动时都执行函数。下面是使

客官°小女子只卖身不卖艺/ 2024年03月25日 13:14/ 0 赞/ 63 阅读

相关节流

节流的原理很简单：如果你持续触发事件，每隔一段时间，只执行一次事件。根据首次是否执行以及结束后是否执行，效果有所不同，实现的方式也有所不同。我们用 leadi

àì夳堔傛蜴生んèń/ 2023年06月19日 09:41/ 0 赞/ 97 阅读

相关防抖和节流的区别是什么？防抖和节流的实现详解！

文章目录防抖非立即执行版立即执行版双剑合璧版防抖的应用场景节流时间戳版

今天药忘吃喽~/ 2023年01月23日 04:56/ 0 赞/ 204 阅读

相关 js节流

问题描述：当我们使用移动或者拖动触发事件的时候这些事件会十分灵敏，不进行处理一秒内会触发几十上百次事件里的程序，会影响程序性能；使用节流可指定最快在多少时间内执行，找了下其他博

向右看齐/ 2022年10月26日 12:58/ 0 赞/ 172 阅读

相关字符流-->字节流

import java.io.BufferedReader; import java.io.BufferedWriter; import java.io

雨点打透心脏的1/2处/ 2022年08月09日 03:21/ 0 赞/ 276 阅读

相关节流的实现

> 在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作，资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数节流throttle就为了解决类似

亦凉/ 2022年04月08日 15:28/ 0 赞/ 155 阅读

相关字节流、字符流

字节流字节输出流OutputStream： OutputStream此抽象类，是表示输出字节流的所有类的超类 FileOutputStream类: public

川长思鸟来/ 2021年12月21日 00:45/ 0 赞/ 316 阅读

相关字节流、字符流

字节流字节输出流OutputStream： OutputStream此抽象类，是表示输出字节流的所有类的超类 FileOutputStream类: public

谁践踏了优雅/ 2021年12月20日 15:29/ 0 赞/ 347 阅读

相关字节流、字符流

【字节流、字符流】主要内容 IO流字节流字符流异常处理 Properties 教学目标能够说出IO流的分类和功

短命女/ 2021年10月18日 05:56/ 0 赞/ 367 阅读

相关字节流

字节流的两个基类：InputStream OutputStream FileInputStream 读 FileInputStream fis=new File

╰+攻爆jí腚メ/ 2021年09月26日 01:46/ 0 赞/ 384 阅读