节流和防抖

节流与防抖，在前端面试得时候，涉及到页面性能优化得时候可能会问下

两者的基本内容

节流： 连续触发很多次，但是在设置时间内只执行一次

防抖：触发事件在设置时间内只执行一次，如果又触发了事件，重新计时

节流与防抖得用途用的比较多的是 上拉刷新，返回顶部，以及一些拖动到某个位置置顶tab的操作，搜索框输入搜索等

简单用返回顶部做个小例子

比如csdn也有个这种功能，返回顶部，在拖动到某个位置的时候才会出现

 

不考虑任何性能的时候可以直接写

function showTopBtn() {
    // 读取滚动条的位置
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    console.log(scrollTop)
    // 以下做判断
    if (scrollTop > '某某值') {
        '返回顶部按钮显示'
    }
}

window.onscroll = showTopBtn

但是这种情况会发现，一旦拖动，就会疯狂的输出scrollTop

对页面的性能会产生特别大的影响，尤其是针对那种小程序的应用，setData太频繁会卡死小程序

防抖版本：

基本思路是设置一个定时器，当再次触发，清除计时器，重新执行

function showTopBtn() {
    // 读取滚动条的位置
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    console.log(scrollTop)
    // 以下做判断
    if (scrollTop > 300) {
        console.log('返回顶部按钮显示')
    }
}
function _debounce(func, delay) {
    let timeout = null
    return function() {
        if (timeout) {
            clearTimeout(timeout)
        }
        timeout = setTimeout(func, delay)
    }
}
window.onscroll = _debounce(showTopBtn, 200)

节流的话，就是设置一个全局变量，执行之后设置为true, 时间之后设置为false, 当为true的时候不执行return

function _debounce(func, delay) {
    let timeout = null
    return function() {
        if (timeout) {
            clearTimeout(timeout)
        }
        timeout = setTimeout(func, delay)
    }
}
function _throttle(func, delay){
    let handle = false
    return function() {
        if(handle){
            return
        }
        handle = true
        setTimeout(() => {
            func()
            handle = false
        }, delay)
    }
}
// window.onscroll = _debounce(showTopBtn, 200)
window.onscroll = _throttle(showTopBtn, 200)