美文网首页
性能优化防抖-节流

性能优化防抖-节流

作者: 搬砖小狂人 | 来源:发表于2019-04-19 17:06 被阅读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;让每一秒执行一次计时器;

相关文章

  • 前端性能优化:手写实现节流防抖

    前端性能优化:手写实现节流防抖 本文首发于 前端性能优化:手写实现节流防抖[https://gitee.com/r...

  • JavaScript中的节流与防抖函数记不住?我的答案保你终身难

    前端性能优化-防抖和节流 前言 防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者...

  • js的防抖和节流

    js的 防抖(debounce)和 节流(throttle ) 防抖和节流一般用于高频触发事件,属于浏览器性能优化...

  • 性能优化防抖-节流

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

  • 性能优化-防抖节流

    防抖

  • JavaScript - 防抖和节流

    lodash工具库里有实现防抖和节流的函数 防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,...

  • 2021年 面试

    泽怡科技 性能优化 promise 防抖节流 缓存机制 cookie、localstorage 原型链、闭包 lo...

  • 防抖和节流

    防抖和节流严格意义上是属于性能优化方面的知识,接下来使用实际应用场景详细解释防抖和节流。 案例:在滚动条滚动到距离...

  • 前端性能优化——防抖、节流

    当我在做监听页面滚动,实时保存页面高度的需求的时候,发现每当页面滚动一下就会记录很多次,这对性能来说是极其不友好的...

  • 前端性能优化|节流&防抖

    节流 函数节流是指规定单位时间,只能有一次触发事件的回调函数执行;如果在同一单位时间内被多次触发,只有一次生效。 ...

网友评论

      本文标题:性能优化防抖-节流

      本文链接:https://www.haomeiwen.com/subject/swzqgqtx.html