«

JavaScript防抖和节流函数代码怎么写

时间:2024-3-8 21:41     作者:韩俊     分类: Javascript


这篇“JavaScript防抖和节流函数代码怎么写”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JavaScript防抖和节流函数代码怎么写”文章吧。

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的频率,打印坐标位置。

标签: javascript

热门推荐