防抖和节流

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

谈谈js中的节流和防抖函数
JavaScript防抖和节流
前端性能优化-浅谈js防抖和节流
Javascript 基础
js 防抖节流
2019-03-27
js的防抖和节流
手写防抖和节流函数实现
实现防抖和节流
2019-04-24关于节流和防抖

防抖

简单概括防抖的概念就是，一个频繁触发的操作但是我们只需要最后一次触发时才调用方法，这个时候我们就可以设置一个定时器，每次触发时延时一定时间才调用。即在事件被触发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 鼠标移动事件加上节流的效果