轩钰

实现防抖与节流
防抖是指触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。节流是指高频事件触发,...
扫描右侧二维码阅读全文
30
2019/09

实现防抖与节流

防抖与节流

什么是防抖?

防抖是指触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。

什么是节流?

节流是指高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。

防抖与节流的作用是什么?

防抖与节流是用来处理事件频繁地触发所产生的技术,都是用来限制事件频繁地发生的

事件频繁触发可能造成的问题:
1、一些浏览器事件如window.onresize、window.onmousemove等触发频率非常高的事件会造成浏览器的性能问题。
2、 向后台请求数据会频繁地触发,对服务器造成不必要的压力。
3、而要限制事件处理函数的频繁调用,有防抖与节流两种技术来解决这个麻烦。

函数节流(throttle)

函数节流的主要思想为在函数需要频繁触发时,函数触发一次后,只有大于设定的执行周期后才会第二次执行改函数。该方法适合多次事件按照时间做平均分配触发

函数节流的使用场景:

1、窗口调整(resize)
2、页面滚动(scroll)
3、DOM元素的拖拽功能实现(mousemove)
4、类似电商抢购商品时的疯狂点击抢购按钮(mousedown)
如何实现:

// 主要使用的是函数闭包的概念,保存上次点击的时刻,与下一次点击的时刻做对比
function throttle(callback, delay){
    let last = 0 
    return function () {
        const now = Date.now()
        if(now - last > delay){ // 从第二次点击开始都需要有间隔时间
            // 现在函数中的this为点击事件对象的this,也就是返回的函数内的this
            callback.apply(this, arguments)
            last = now
        }
    }
}
/*
    下面是测试
*/
function handleClick() {
    console.log('点击事件')
}
document.getElementById('throttle').onclick = throttle(handleClick, 1000)

函数防抖(debounce)

函数防抖的主要思想为在规定时间内,只让最后一次的处理事件的效果生效,而让前面的处理事件不生效。该方法适合多次事件一次响应的情况

函数防抖的使用场景:

1、实时的搜索框(实时根据输入框的数据发送ajax请求)(keyup)
2、文本输入的验证(连续输入文字后发送ajax请求进行验证,但是只验证最后一次输入的内容)(input)
3、判断scroll是否滚动到底部(scrolll)
如何实现:

// 主要使用的是函数闭包的概念,保存上次点击的时刻,与下一次点击的时刻做对比
function debounce(callback, delay){
    return function () {
        // 保存this和arguments
        const _self = this
        const args = arguments
        // 清除待执行的定时器任务
        if(callback.timer){
            clearTimeout(callback.timer)
        }
        // 将定时器挂载到函数对象上
        callback.timer = setTimeout(()=>{// 因为是箭头函数其实可以不在外部保存this直接绑定this
            callback.apply(_self, args)
            // 执行完后删除函数的timer属性
            delete callback.timer
        },delay)
    }
}
/*
    下面是测试
*/
function handleClick() {
    console.log('点击事件')
}
document.getElementById('throttle').onclick = debounce(handleClick, 1000)
Last modification:September 30th, 2019 at 03:06 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment