当前位置:首页 > javascript > 正文内容

防抖和节流

自由小鸟4年前 (2019-12-08)javascript2550

如果我在一个时间内只执行一次,最好用防抖,如果只是想在执行时,设置一下间隔时间那么用节流

防抖是在一个时间内只能执行一次,如果频繁操作就会清除重新开始计算执行,我设置的时间内整个过程中只会执行一次

/*
    函数的防抖 debounce,不是某个事件触发就去执行函数,而是在指定的时间间隔内执行一次,减少函数执行的次数
    @params:
        func:要执行的函数
        wait:间隔等待时间
        immediate:在开始边界触发,还是结束边界触发 true是开始边界执行
    return:
        可被调用的函数
*/
function debounce(func,wait,immediate){
    let timeout=null, //定时器 setTimeout
        result=null;  //接收函数返回的结果

    return function(...args){
        let context=this,
            now=immediate && !timeout;
        //执行之前一定先清除定时器  
        clearTimeout(timeout);   //防抖的关键,在设置新的定时器之前先把之前的定时器都清除
        //如果不是立即执行就走这里定时器
        timeout=setTimeout(()=>{ //在结束边界执行
            if(!immediate) result=func.call(context,...args);
            clearTimeout(timeout);
            timeout=null;
        },wait);
        if(now) result=func.call(context,...args) //立即执行,在开始边界执行
        return result;
    }
}

let count=0;
function fn(){
    console.log(++count);
}

let aa=debounce(fn,100,true);
window.onscroll=aa;

节流是在一个时间内可以执行多次,函数节流是为了缩减执行频率,当达到了一定的时间间隔就会执行一次

/*
         * throttle:函数节流是为了缩减执行频率,当达到了一定的时间间隔就会执行一次
         *   @params
         *      func:需要执行的函数
         *      wait:设置的间隔时间
         *   @return
         *      返回可被调用的函数
         */
        let throttle = function (func, wait) {
            let timeout = null,
                result = null,
                previous = 0; //=>上次执行时间点
            return function (...args) {
                let now = new Date,
                    context = this;
                //=>remaining小于等于0,表示上次执行至此所间隔时间已经超过一个时间间隔
                let remaining = wait - (now - previous);
                if (remaining <= 0) {
                    clearTimeout(timeout);
                    previous = now;
                    timeout = null;
                    result = func.apply(context, args);
                } else if (!timeout) {
                    timeout = setTimeout(() => {
                        previous = new Date;
                        timeout = null;
                        result = func.apply(context, args);
                    }, remaining);
                }
                return result;
            };
        };

        let count = 0;

        function fn() {
            console.log(++count);
        }
        let lazyFn = throttle(fn, 1000);
        window.onscroll = lazyFn;

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=86

“防抖和节流” 的相关文章

HTTP协议类

HTTP协议类

HTTP协议的主要特点    1,简单快速,每个资源是固定的,通过固定url就可以了    2,灵活  head有数据类型,一个HTTP协议可以完成不同数据类型的传输    3,无连接&nb...

js 面向对象类

js 面向对象类

类与实例:    类的声明    生成实例类与继承    如何实现继承    继承的几种方式原型链实现继承new child2.__prot...

函数参数会生成新的作用域

函数参数会生成新的作用域

如果函数定义了参数就会自动生成新的作用域,这时候里面的变量值就会先从参数新的作用域找,如果没有就会再往上面找直到全局...

event-loop

event-loop

如果知道js运行机制,在工作中会帮助我们更好的理解和编写代码,也知道为什么js是单线程js为什么是单线程原因,就是为了避免DOM渲染的冲突异步是一种“无奈”的解决方案,虽然有很多问题,如下:1,没按照书写方式执行,可读性差2,callback中不容易模块化什么是event-loop1,同步代码,直接...

最全的js运行机制

最全的js运行机制

主线程Event Queue:(微任务,宏任务) 1,主线程执行完后2,到Event Queue里找,先执行微任务,再宏任务...

js 判断数组,对象

arr=[1,2,3,4]; obj={a:'aaa'}; console.log(arr.constructor===Object) //false arr instanceof Array //true Object.prototype.toString.call(...