美文网首页
防抖和节流

防抖和节流

作者: 弱冠而不立 | 来源:发表于2020-11-16 21:02 被阅读0次

防抖

简单概括防抖的概念就是,一个频繁触发的操作但是我们只需要最后一次触发时才调用方法,这个时候我们就可以设置一个定时器,每次触发时延时一定时间才调用。即在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时

    function debounce(func, delay) {
        let timeOut;
        return function () {
            clearTimeout(timeOut);
            // 多次触发就重新计算时间
            timeOut = setTimeout(()=> {
                func.apply(this, arguments)
            }, delay)
        }
    }

使用示例:

<body>
    防抖过:<input id="debounce_ipt" type="text"><br />
    没防抖:<input id="bounce_ipt" type="text">
</body>
<script>
    const debounce_ipt = document.querySelector("#debounce_ipt");
    const bounce_ipt = document.querySelector("#bounce_ipt");
    function debounce(func, delay) {
        let timeOut;
        return function () {
            clearTimeout(timeOut);
            // 多次触发就重新计算时间
            timeOut = setTimeout(()=> {
                func.apply(this, arguments)
            }, delay)
        }
    }

    const debounce_validate = debounce((e) => {
        console.log("防抖过的",e.target.value);
    }, 1000)

    debounce_ipt.addEventListener("input", debounce_validate)
    bounce_ipt.addEventListener("input", (e) => {
        console.log("没防抖的",e.target.value);
    })
</script>
输入框加上防抖的效果

节流

规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

    function throttle(func, interval) {
        let start = new Date();
        let timeOut;
        return function() {
            clearTimeout(timeOut)
            let now = new Date();
            //如果当前时间大于等于设定的间隔时间,则执行
            if(now - start >= interval) {
                func.apply(this, arguments);
                start = now;
            } else {
                //让方法在脱离事件后也能执行一次
                timeOut = setTimeout(()=>{
                    func.apply(this, arguments)
                }, interval)
            }
        }
    }

使用实例:

<body>
    节流过:<div id="throttle_div" style="width: 100px; height: 100px; background-color: pink;"></div>
    没节流:<div id="unthrottle_div" style="width: 100px; height: 100px; background-color: orange;"></div>
</body>
<script>
    const throttle_div = document.querySelector("#throttle_div");
    const unthrottle_div = document.querySelector("#unthrottle_div");
    function throttle(func, interval) {
        let start = new Date();
        let timeOut;
        return function() {
            clearTimeout(timeOut)
            let now = new Date();
            //如果当前时间大于等于设定的间隔时间,则执行
            if(now - start >= interval) {
                func.apply(this, arguments);
                start = now;
            } else {
                //让方法在脱离事件后也能执行一次
                timeOut = setTimeout(()=>{
                    func.apply(this, arguments)
                }, interval)
            }
        }
    }

    const throttle_mouseover = throttle((e)=>{
        console.log("节流过的:", e.pageX, e.pageY, "-----", new Date());
    }, 1000)
    throttle_div.addEventListener("mousemove", throttle_mouseover)
    unthrottle_div.addEventListener("mousemove", (e)=>{
        console.log("没节流过的:", e.pageX, e.pageY, "-----", new Date());
    })

</script>
div 鼠标移动事件加上节流的效果

相关文章

  • 谈谈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/womubktx.html