JavaScript实现防抖节流函数

review

防抖函数

防抖函数一般是短时间内多次触发，但是只有最后一次触发结束后的delay秒内会去执行相对应的处理函数。
相当于一个赛道里面一次只能跑一辆赛车，如果此时已经有一辆赛车在跑道里面跑，但是又进来了一辆，那么之前那一辆赛车就会被清空。知道有一辆赛车到达终点，然后执行函数。
也就是说，防抖函数多次触发，但是一段时间内触发的n次，最后只能有一次会执行。

节流函数

节流函数如果也用赛车的案例来举例，就是说：
一个赛道里面，如果此时已经有了一辆赛车，那么其他想要进入赛道的赛车就会被阻止，直到前一辆赛车进去以后，才会被允许进入一辆新赛车。
下面的代码中我实现了两种版本的节流函数：

第一次触发立即执行（使用时间戳）
第一次触发，需要等待delay秒之后才执行

code

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖节流</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background: #000;
        }
    </style>
</head>
 
<body>
    <input type="text">
    <div></div>
</body>
<script>
    const input = document.getElementsByTagName('input')[0];
    input.addEventListener('input', queryD(dosomething, 2000));
 
    function dosomething() {
        console.log('do some thing');
    }
 
    // 防抖函数(触发后delay秒内不能再触发，否则重新计时)
    // 可以应用于需要频繁发送请求的场景下
    function queryD(func, delay) {
        console.log('in query d');
        let time = null
        return function () {
            clearTimeout(time);
            time = setTimeout(func, delay);
        }
    }
 
    //----------------------------------------------------
    const div = document.querySelector('div');
    div.addEventListener('touchmove', cost(dosomething, 500));
    div.addEventListener('touchmove', useDate(dosomething, 500));
    // 节流函数(一段时间内只能发生一次)
    // 第一次执行也需要在delay秒之后
    function cost(func, delay) {
        let time = null;
        return () => {
            if (!time) {
                time = setTimeout(() => {
                    func();
                    time = null;
                }, delay);
            }
        }
    }
 
    // 使用date实现节流函数
    // 可以立即执行，下一次执行需要等待delay秒之后
    function useDate(func, delay) {
        let time = new Date().getTime();
        return () => {
            const cur = new Date().getTime();
            if (cur - time > delay) {
                time = cur;
                func();
            }
        }
    }
 
</script>
 
</html>

posted @ 2022-03-12 15:12 azoux 阅读(53) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· javascript 生成器和迭代器

· typescript class属性定义的先后问题

· 104前端之函数防抖，函数节流

· 函数节流与防抖

· JS函数防抖节流

阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

azoux

一个迷茫摸黑前行的人

JavaScript实现防抖节流函数

review

防抖函数

节流函数

code

最新随笔

我的标签

随笔分类 (35)

随笔档案 (73)

阅读排行榜

评论排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>防抖节流</title>
	<style>
	div {
	width: 300px;
	height: 300px;
	background: #000;
	}
	</style>
	</head>

	<body>
	<input type="text">
	<div></div>
	</body>
	<script>
	const input = document.getElementsByTagName('input')[0];
	input.addEventListener('input', queryD(dosomething, 2000));

	function dosomething() {
	console.log('do some thing');
	}

	// 防抖函数(触发后delay秒内不能再触发，否则重新计时)
	// 可以应用于需要频繁发送请求的场景下
	function queryD(func, delay) {
	console.log('in query d');
	let time = null
	return function () {
	clearTimeout(time);
	time = setTimeout(func, delay);
	}
	}

	//----------------------------------------------------
	const div = document.querySelector('div');
	div.addEventListener('touchmove', cost(dosomething, 500));
	div.addEventListener('touchmove', useDate(dosomething, 500));
	// 节流函数(一段时间内只能发生一次)
	// 第一次执行也需要在delay秒之后
	function cost(func, delay) {
	let time = null;
	return () => {
	if (!time) {
	time = setTimeout(() => {
	func();
	time = null;
	}, delay);
	}
	}
	}

	// 使用date实现节流函数
	// 可以立即执行，下一次执行需要等待delay秒之后
	function useDate(func, delay) {
	let time = new Date().getTime();
	return () => {
	const cur = new Date().getTime();
	if (cur - time > delay) {
	time = cur;
	func();
	}
	}
	}

	</script>

	</html>