h5页面中或app实时刷新:节流和防抖

一、在应用程序或者前端页面中有时候会用到实时交互，经常用到两个用于刷新页面的

二、节流（throttle）：

1、不停的执行一个操作，在指定的时间间隔内不会重复执行处理函数,当持续触发事件时，保证一定时间内只调用一次处理函数，意思是：假设用户一直触发这个函数，且每次触发时间间隔小于设定的值，在这个时间间隔内只调用一次

function throttle(fn, delay) {
    let valid = true;
    return function () {
        if (!valid) {
            // 在指定的时间间隔内
            return false;
        }
        valid = false;
        setTimeout(() => {
            fn();
            valid = true;
        }, delay);
    };
}
function showTop() {
    var scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
    console.log("当前的滚动位置:" + scrollTop);
}
window.onscroll = throttle(showTop, 1000);

三、防抖（debounce）:

1、当持续触发事件时，一定时间段内没有再次触发事件，事件的处理函数会执行一次，如果设定时间到来之前，又触发了事件，就重新开始计时。也就是说当用户一但触发这个函数，并且时间间隔在设置好的时间内，那么防抖的情况下会只执行一次

function debounce(fn, delay) {
    let timer = null;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(fn, delay);
    };
}
function showTop() {
    var scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
    console.log("当前的滚动位置:" + scrollTop);
}
window.onscroll = debounce(showTop, 1000);