JavaScript js防抖节流代码实例

 //防抖实例
        let i = document.querySelector('input')
        i.addEventListener('input',fangdou(requrst,2000))

        function fangdou(fn,time){
            let timer = null 
            return args=>{
                if(timer) clearTimeout(timer)
                timer = setTimeout(fn,time)
            }
        }

        function requrst(){
            console.log('发送请求');
        }*/

```//节流实例
        let box = document.querySelector('.box')
        box.addEventListener('mousemove',jieliu(requrst,2000))

        function jieliu(fn,delay){
            let timer = 0
            return args=>{
               const now = Date.now()
               if(now - timer >= delay){
                    fn()
                    timer = now
               }
            }
        }

        function requrst(){
            console.log('发送请求');
        }

防抖函数和节流函数都是用来限制函数的执行频率,防止短时间内多次触发导致性能问题。 防抖函数(Debounce)的作用是将多次连续触发的函数调用合并为一个函数调用。当事件触发后,设定一个定时器,在指定的时间间隔内如果事件再次触发,则重新计时,直到指定时间间隔内没有事件再次触发,才执行函数。 下面是一个使用防抖函数的例子: ```javascript function debounce(func, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; } // 使用防抖函数来限制按钮点击事件的频率 const button = document.querySelector('button'); button.addEventListener('click', debounce(() => { console.log('Button clicked'); }, 2000)); ``` 节流函数(Throttle)的作用是在一定时间间隔内只执行一次函数。当事件触发后,设定一个定时器,在指定的时间间隔内只能执行一次函数。 下面是一个使用节流函数的例子: ```javascript function throttle(func, delay) { let timer = null; let lastTime = 0; return function(...args) { const currentTime = new Date().getTime(); if (currentTime - lastTime > delay) { func.apply(this, args); lastTime = currentTime; } }; } // 使用节流函数来限制滚动事件的触发频率 window.addEventListener('scroll', throttle(() => { console.log('Scrolling'); }, 1000)); ``` 这样,在按钮点击事件或者滚动事件触发时,就可以控制其执行频率,避免频繁触发导致性能问题。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值