Vue手写防抖和节流函数代码详解

Vue防抖和节流 Vue防抖 Vue节流 2023-02-25 11:02:55 768人浏览安东尼

摘要

目录1. 手写防抖debounce2. 手写节流throttle1. 手写防抖debounce 首先介绍一个防抖的应用场景。假如需要监听一个输入框在输入文字后触发的change事件，

1. 手写防抖debounce

首先介绍一个防抖的应用场景。假如需要监听一个输入框在输入文字后触发的change事件，那么通过keyup事件，每次输入文字后都会触发change事件，频繁触发的情况会影响系统的性能。因此可以使用防抖来降低触发频率，即在用户输入结束或暂停时，才会触发change事件。

<script>
	const input1 = document.getElementById('input1')
	// 封装的防抖函数
	function debounce(fn, delay = 500){
	    let timer = null
	    return function(){
	        if(timer){
	            clearTimeout(timer)
	        }
	        timer = setTimeout(()=>{
	            fn.apply(this, arguments)
	            timer = null
	        }, delay)
	    }
	}
	// 调用防抖函数
	input1.addEventListener('keyup', debounce(function(){
	    console.log(input1.value)
	}, 1000))
</script>

在输入框中输入内容后 1s 才会触发事件监听里面的打印功能。

2. 手写节流throttle

与防抖在一段时间之后触发事件不同，节流会以固定频率触发事件。下面介绍一个节流的应用场景，假如在拖拽一个元素时，需要随时拿到该元素当前被拖拽到的位置，如果直接使用drag事件，那么会频繁触发该事件，很容易卡顿。此时可以使用节流，即无论拖拽速度有多快，都可以设置固定的频率触发。

<body>
    <div id="div1" draggable="true">可拖拽</div>
    <script>
        const div1 = document.getElementById('div1')
        // 封装节流函数
        function throttle(fn, delay = 500){
            let timer = null
            return function(){
                if(timer){
                    return
                }
                timer = setTimeout(()=>{
                    fn.apply(this, arguments)
                    timer = null
                }, delay)
            }
        }
        // 在事件监听里面调用节流函数
        div1.addEventListener('drag', throttle(function(e){
            console.log(e.offsetX, e.offsetY)
        }, 1000))
    </script>
</body>

随着元素被拖拽，本来应该迅速触发拖拽事件打印元素的坐标位置，然而使用节流将打印元素位置的函数封装之后，就会以每隔1000ms的频率，打印坐标位置。