节流和防抖

作者: Zhou_qn | 来源:发表于2020-03-31 18:38 被阅读0次

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

参考文章：https://www.jianshu.com/p/c8b86b09daf0

在前端开发中，会经常用到一些触发事件,例如scroll、mousemove 等，但这些事件如果不加以限制就会持续的执行某个函数，因为浏览器性能是有限的，频繁执行函数很消耗浏览器的性能，所以我们希望控制事件的执行频率

节流

触发时不会一直执行函数，而是一定时间内执行一次函数（一段时间内执行一次代码）

防抖

持续触发不执行，不触发的一段时间之后再执行（每次触发都会更新时间）

例：
body里的代码

<body>
<div id="content" style="height: 200px; width: 200px; border: 1px black solid"></div>
</body>

script里的代码

防抖：

 let num = 1;
    function count() {
        let content = document.getElementById('content');
        content.innerHTML = num++;
    }
    function debounce(func,wait){
        let timeout;
        return function () {
            let context = this;
            let args = arguments;
            if(timeout){
                //当一直触发就会一直进入这个分支，就会重新计时
                clearTimeout(timeout);
            }
            timeout = setTimeout(()=>{
                func.apply(context,args);
            },wait)
        }
    }
    content.onmousemove = debounce(count,1000);

节流

 function throttle(func,wait){
        let timeout;
        return function(){
            let context = this;
            let args = arguments;
            if(!timeout){
                //当进入以后！timeout一直是false,
                //直到wait时间到了，timeout＝null,!timeout=true,
                //触发func.apply(context,args),计数函数被执行
                timeout = setTimeout(()=>{
                    timeout = null;
                    func.apply(context,args);
                },wait)
            }
        }
    }
    content.onmousemove = throttle(count,1000);