函数节流防抖

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

    /* 防抖 */
    function shake(fn, wait) {
        var time = null;
        return function () {
            clearTimeout(time)
            time = setTimeout(() => {
                fn.apply(this, arguments)//确保shake函数的this(上下文还是div)
            }, wait);
        }
    }
    function shakeFn() {
        console.log('防抖啦')
    }
    // 用事件绑定调用shake事件,所以this为div节点对象
    document.querySelector('div').addEventListener('scroll', shake(shakeFn, 1000))

节流:高频事件触发,但在n秒内只会执行一次

    /* 节流 */
    function throttle(func, wait) {
        var previous = 0;
        return function () {
            var now = +new Date();
            if (now - previous > wait) {
                func.apply(this, arguments);
                previous = now;
            }
        }
    }
    function getUserAction() {
        console.log(`每秒1秒内打印一次`)
    }
    document.querySelector('div').addEventListener('click', throttle(getUserAction, 1000))

你可能感兴趣的:(函数节流防抖)