函数节流和防抖（三个版本方法）

最新推荐文章于 2024-05-17 14:32:46 发布

西红柿很酸

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量75

点赞数

文章标签： vue.js node.js javascript

本文链接：https://blog.csdn.net/Aurora_sm/article/details/120635111

版权

设置案例所用的显示内容


<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#content {
			width:150px;
			line-height:150px;
			text-align:center;
			color: #fff;
			background-color:#ccc;
			font-size:80px;
		}
	</style>
</head>
<body>
	<div id="content">1</div>
</body>
<script>
    let num = 1;
    let content = document.getElementById('content');
 
    function count() {
        content.innerHTML = num++;
    };
</script>

*短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。

*立即执行版


	// // 立即执行版
	// function debounce(func, wait) {
	//     let timer;
	//     return function() {
	//       let context = this; // 这边的 this 指向谁?
	//       let args = arguments; // arguments中存着e
	 
	//       if (timer) clearTimeout(timer);
	 
	//       let callNow = !timer;
	 
	//       timer = setTimeout(() => {
	//         timer = null;
	//       }, wait)
	 
	//       if (callNow) func.apply(context, args);
	//     }
	// }

时间戳版

// 时间戳版
	// 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;
	//       }
	//     }
	// }

定时器版

// 定时器版
	function throttle(func, wait) {
	    let timeout;
	    return function() {
	      let context = this;
	      let args = arguments;
	      if (!timeout) {
	        timeout = setTimeout(() => {
	          timeout = null;
	          func.apply(context, args)
	        }, wait)
	      }
	    }
	}
	content.onmousemove = throttle(count,1000);

西红柿很酸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数节流和防抖（三个版本方法）

// // 立即执行版 // function debounce(func, wait) { // let timer; // return function() { // let context = this; // 这边的 this 指向谁? // let args = arguments; // arguments中存着e // if (timer) clearTimeout(timer);...
复制链接

扫一扫