性能优化防抖-节流

防抖:在触发事件之后规定的时间之后执行该事件(比如说input事件想要在用户输入结束之后多少秒再执行事件--查询等)

节流:用户在触发事件的时候,会在规定的时间内只会触发一次(比如说input事件用户一直在输入但是呢不会一直向后端发起请求,规定1秒请求一次。只要用户一直在输入1秒就会发起一个ajax)

防抖代码

function debouncing(fn, outTimer) {

    var self = fn,timer=null;

    return function() {

        var args = arguments;

       if (timer) {

            clearTimeout(timer)

        }

        timer = setTimeout(function(){

            self.apply(this, args)

            // self()

        },outTimer)

    }

}

window.onresize = debouncing(function() {

    console.log('1')

}, 2000)

只要触发事件timer就会有值并且刷新计时器(清除)

节流代码

function throttle(fn, outTime) {

    var self = fn,

    timer,

    firstTime = true;

    return function() {

        var args = arguments,

            _me = this;

        if (firstTime) {

            // self()

            self.apply(_me, args)

            return firstTime = false;

        }

        if (timer) {

            return false

        }

        timer = setTimeout(function() {

            clearTimeout(timer)

            timer = null;

            // self()

            self.apply(_me, args)

        }, outTime)

    }

}

window.onresize = throttle(function() {

    console.log('1')

}, 1000)

刚触发事件就会触发事件  每一秒会执行一次事件;如果一直在执行timer就会有值就会直接结束执行,在计时器里面从新定义timer=null;让每一秒执行一次计时器;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容