10分钟带你了解防抖与节流，如果不懂就看20分钟

最新推荐文章于 2024-11-06 17:18:24 发布

学前端的枣仁

最新推荐文章于 2024-11-06 17:18:24 发布

阅读量116

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41022872/article/details/105144967

版权

10分钟带你了解防抖与节流，如果不懂就看20分钟

闲言碎语

事情是这样的：昨天产品那边有一个需求，我们的搜索框需要在用户输入的时候，边搜索，变查询数据，我当时脑子一激灵，万一人家一秒中按了一万下呢？产品听我这么一说，嗯！有道理，我看看旁边已经工作了好几年的老哥，仿佛在说，小朋友，你是否有很多问号？其实，做一下防抖与节流就可以。

概念

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
节流：指定时间间隔内只会执行一次任务。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id='debounce'>点我防抖</button>
</body>
<script>
    document.getElementById('debounce').addEventListener('click',doDebounce(sayDebounce));
	
	function doDebounce(fn) {
        // 1.注意，这段代码是立即执行的，利用了闭包的写法，声明了一个内部的变量
        // 这个变量是用来控制定时任务的，清除了timeoutId，定时任务就取消了
        let timeoutId = null;
        return function() {
            // 3.每次点击的时候，清除上一次定时任务
            clearTimeout(timeoutId);
            // 2.点击之后触发一个定时任务,并把timtoutId返回，利于我们清除
        	timeoutId = setTimeout(function(){
                fn.call(this);	
            }, 1000)
        }
    }
   	 
	function sayDebounce() {
        // doSomeThing 可以给用户一些提示，让用户不要频繁操作什么的
        console.log('防抖成功！');
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id='debounce'>点我节流</button>
</body>
<script>		            document.getElementById('debounce').addEventListener('click',throttle(sayThrottle));
 	
	function throttle(fn) {
        // 1.和防抖一样，节流需要一个canRun变量来控制是否可以执行（立即执行的）
        let canRun = true;
        return function() {
            // 3.点击间隔内多次点击时，会直接返回
			if (!canRun) {
                return;
            }
            // 2.每次点击 canRun都会变成false，只有等定时任务执行了才会将canRun变成true
            canRun = false;
            setTimeout(function(){
                fn.call(this);
                // 4.你看，当定时任务执行完了之后，canRun就为true，就可以进行下一次操作了
                canRun = true;
            }, 1000)
        }
    }
	
	function sayThrottle() {
    	// doSomeThing
        console.log('节流成功！');
    }
</script>
</html>