防抖,节流,柯里化

柯里化


        var sum = function() {
    
    
            let arg = Array.prototype.slice.call(arguments);

            // let total = arg[0];
            let inner = function(y) {
    
    
                let total = 0;
                arg.push(arguments[0]);
                arg.forEach(item => total += item);
                // return total;
                console.log(total);
                return inner;
            }
            let total = 0;
            arg.forEach(item => total += item);
            console.log(total);
            return inner;
        }

        // sum(1)(2)(4);
//防抖: 第一次点击, 5s后再触发, 如果这5s内又被触发, 则重新计时, 直到5s内没有点击, 才会最终触发
        //常用在多次统计事件,比如滚动停止位置, 当用户停止滚动一段时间后才会统计显示, 而不是每秒都显示; 比如搜索栏,用户不断输入值, 并不需要立即显示, 而是可以等一会等用户看起来确定了再发请求
        //相当于就是多次触发,从最后一次触发刷新计时器, 倒计时完毕再执行.
        //不防抖的情况: 点击即触发paymoney
        window.addEventListener('click', payMoney);
        //加入防抖: 把paymoney包装进计时器里
        window.addEventListener('resize', debounce(payMoney));

        function debounce(func, delay) {
    
    
            let timer;

            //闭包,使用同一个计时器
            //返回的是个函数, 不能直接func(), 这代表被调用
            return function() {
    
     //这个内部函数被返回给button绑定,所以此时this指向botton
                let that = this;
                let args = arguments;
                clearTimeout(timer);
                // timer = setTimeout(func(), delay);
                timer = setTimeout(function() {
    
    
                    func.apply(that, args);
                }, delay);
            }
        }
//节流:第一次点击即时触发, 并且开始倒计时5s, 在5s内多次点击不会执行
        //不停点击提交, 只在初次点击生效; 
        //相当于就是多次触发,第一次触发就执行, 并开始计时器, 倒计时完毕前不会再执行.
        button.addEventListener('click', throttle(payMoney))

        function throttle(func, delay) {
    
    
            let pre = 0;
            // let timer;

            return function() {
    
    
                let that = this;
                let args = arguments;
                let now = new Date(); //此次点击时的时间
                if (now - pre > delay) {
    
    
                    func().apply(that, args);
                    pre = now; //第i次点击后,初始化pre为第i次点击时间
                }
            }

        }

        function payMoney() {
    
    
            console.log(this);
        }

Guess you like

Origin blog.csdn.net/Fky_mie/article/details/117112783