06.js防抖与节流

    // 防抖函数
    function fangdou(fn,delay){
        // 1.设置的定时器为null
        let timer = null;
        return function(){
            // 3.如果定时器不为空则说明已经执行了防抖函数,那么就清空定时器
            if(timer){
                clearTimeout(timer)
            }
            // 2.
            // 触发事件就执行定时器,在规定的时间后内执行要防抖的函数
            // 如果此时在该定时器还没结束的时候,又执行了一次函数,那么就还得再执行一次定时器,
            // 此时就会多次执行定时器,也就会多次执行要防抖的函数,就达不到防抖的目的了,
            // 所以当再次触发事件时,就要执行第3步的清空定时器,让定时器重新计时
            // 时间过了,再执行要防抖的函数,从而达到只执行一次定时器的目的
            timer = setTimeout(() => {
                // 4.执行要防抖的函数并改变this指向
                fn.call(this)
            },delay)
        }
    }
    
    // 节流函数
    function jieliu(fn,delay){
        // 1.设置一个参数为真
        let flag = true;
        return function(){
            // 如果参数为真就执行定时器
            if(flag){
                setTimeout(() => {
                    // 执行节流函数并执行this
                    fn.call(this);
                    // 3.将参数flag改为true,即在执行完毕这一次的定时器,才能开启下一次的定时器
                    // 也就是在规定的时间内只能执行一次节流函数
                    flag = true;
                },delay)
            }
            // 2.定时器执行完毕,将falg改为false,当再次执行该函数时,
            //  就不再执行定时器里面的节流函数,就执行一次定时器
            flag = false
        }
    }

你可能感兴趣的:(javascript,开发语言,ecmascript)