性能优化防抖-节流

2019-04-19  本文已影响0人  搬砖小狂人

防抖:在触发事件之后规定的时间之后执行该事件(比如说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;让每一秒执行一次计时器;

上一篇 下一篇

猜你喜欢

热点阅读