美文网首页
防抖和节流

防抖和节流

作者: 瓩千瓦 | 来源:发表于2019-03-10 16:14 被阅读0次

debounce防抖:

    当事件快速连续不断触发时,动作只会执行一次

    window.onresize = function () {

        debounce(addlist, delay)  //这一个设置了节流

        console.log(1)  // 这个是普通的函数执行

    }

    function debounce(fn, delay) {    // 定义一个debounce函数

        clearTimeout(fn.timeid)

        fn.timeid = setTimeout(function () {

            fn()

        }, delay)

    }

throttle节流:

    原理:不管事件触发有多频繁,在规定时间内一定会执行一次真正的事件处理函数。

    var delay = 300;

    function commonWay() {    // 这是执行了普通的函数

        console.log(1);

    }

    // tottle的实现,也就是节流的实现,就是设置了一个一开始函数运行的时间戳进行执行

    var startTime, timestamp, timer;

    function throttle(fn, delay) {

        timestamp = +new Date()  // 先设置开始的时间

        clearTimeout(timer)

        if (!startTime) {

            startTime = timestamp

        }

        if (timestamp - startTime >= delay) {

            fn()

            startTime = timestamp

        } else {

            timer = setTimeout(function () {

                fn()

            }, delay)

        }

    }

    window.addEventListener('resize', function () {

        throttle(commonWay, 2000);

    })

相关文章

  • 谈谈js中的节流和防抖函数

    关于节流和防抖,这篇文章说的很好了,深入lodash源码分析防抖和节流深入篇 | Lodash 防抖和节流是怎么实...

  • JavaScript防抖和节流

    1. 认识防抖和节流 1.1. 对防抖和节流的认识 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电...

  • 前端性能优化-浅谈js防抖和节流

    浅谈js防抖和节流

  • Javascript 基础

    1、函数防抖和函数节流 【《javascript高级程序设计》里,函数节流是这里讲的函数防抖。】函数防抖: 在事件...

  • js 防抖 节流

    节流 防抖1 防抖2

  • 2019-03-27

    js的防抖和节流 据我所知防抖和节流都是为了优化作用,减轻浏览器和服务端的负担,防抖和节流俩个的英文要记住: de...

  • js的防抖和节流

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

  • 手写防抖和节流函数实现

    1. 认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流...

  • 实现防抖和节流

    一、认识防抖和节流函数 防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动...

  • 2019-04-24关于节流和防抖

    节流: 应用场景: 防抖: 应用场景: 1.节流 2.防抖

网友评论

      本文标题:防抖和节流

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