js防抖和节流

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>防抖和节流</title>
    </head>
    <body>
        <input type="" name="" id="input" value="" />
        <script>
            const debounce = function(fn, delay = 300) {
                let timer = null
                return function() {
                    if (timer) clearTimeout(timer)
                    timer = setTimeout(() => {
                        fn.apply(this, arguments)
                        timer = null
                    }, delay)
                }
            }
            
            const throttle = function(fn, delay = 300) {
                let timer = null
                return function() {
                    if (timer) return
                    timer = setTimeout(() => {
                        fn.apply(this, arguments)
                        timer = null
                    }, delay)
                }
            }
            // 防抖测试
            const input = document.getElementById('input')
            input.addEventListener('input', debounce((ev) => {
                console.log(ev.target.value)
            }, 500))
            // 节流测试
            window.addEventListener('resize', throttle((ev) => {
                console.log('resize', ev)
            }, 500))
        </script>
    </body>
</html>

js防抖和节流

anchen

引用和评论

如何理解JS原型和原型链

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

Base64编码的“暗坑”：解密失败？可能是这些原因！

原生electron起步-从零到一完成构建和打包

LRU算法，你别跑，我就要吃透你