zoukankan      html  css  js  c++  java
  • 防抖、节流

    防抖函数手写

    当事件被触发时,设定一个定时器,若期间又被触发,则重新设定周期,直到周期结束

            //需求:监听浏览器滚动事件,返回当前滚条与顶部的距离
    
            //需求实现(未处理版)
            function watchScroll() {
                let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
                console.log(scrollTop)
            }
            window.onscroll = watchScroll
    
            //需求实现(debounce处理版)
            //如果不做处理,在拖动滚动条时这个函数触发的频率会很高,为了不浪费浏览器性能,这里可以用上防抖函数
            /**
             * @param fn:需要防抖处理的函数,delay:防抖设置的间隔
             * @return function
             */
            function debounce(fn, delay) {
                let timer = null
                //这里用到了闭包,每次onscroll触发都会调用下一行返回的匿名函数,所以timer=null只会执行一次,并且timer会一直保留到闭包函数销毁为止      
                return function () {
                    if (timer) {
                        clearTimeout(timer)
                        timer = setTimeout(fn, delay)
                    } else {
                        timer = setTimeout(fn, delay)
                    }
                }
            }
            function showTop() {
                let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                console.log(scrollTop);
            }
            window.onscroll = debounce(showTop, 1000)
            //经过处理,滚动条停止滚动1秒以后,才会打印出滚动条位置
    

    节流函数手写

    当事件被触发时,在一定时间内只有第一次触发有效,若期间又被触发则无效,直到周期结束

    阀门版
      /**
       * @param fn:需要节流处理的函数,delay:节流设置的间隔
       * @return function
       */
            function throttle2(fn, delay) {
                let working = false
                return function () {
                    if (working) {
                        console.log("阀门未开")
                    } else {
                        working = true
                        fn()
                        setTimeout(function () {
                            // fn()
                            working = false
                        }, delay)
                    }
                }
            }
    
    时间戳版
            function throttle(fn, delay) {
                let last = 0
                return function () {
                    let now = Date.now()
                    if (now > last + delay) {
                        fn()
                        // setTimeout(function () {
                        //     fn()
                        // }, delay)
                        last = now
                    }
                    else {
                        console.log("距离上次调用的时间差不满足要求哦")
                    }
                }
            }
    

    一般直接引用lodash防抖节流函数即可

  • 相关阅读:
    为啥我百度定位wifi可以定位准确,但用数据流量就给我定位到非洲西海岸
    利用BottomNavigationBar实现不同的fragment之间的转换
    VS2010中连接sql 2005连接问题microsoft.sqlserver.management.sdk.sfc
    zuul路由网关介绍及使用
    Hystrix断路器概述及使用
    Ribbon负载均衡概述及使用
    Eureka服务注册与发现 介绍及使用
    微服务介绍及springcloud入门概述
    springboot整合springdatajpa步骤及使用
    springboot整合shiro步骤
  • 原文地址:https://www.cnblogs.com/chyshy/p/13608443.html
Copyright © 2011-2022 走看看