防抖和节流

防抖

事件处理函数在一定时间后才执行，如果这段时间再次调用，则会重新计算时间，如果超出预定时间没有调用，则执行事件函数

<style>
    #container{
        height: 200px;
        background-color: rgb(119, 115, 110);
        color: white;
        text-align: center;
        line-height: 200px;
    }
</style>

<div id="container"></div>
<script>
    // 演示事件是如何频繁发生的
    let container=document.querySelector('#container');
    let count=1;
    function doSomeThing(event){
        container.innerHTML=count++;
        console.log(this);
        console.log(event);
    }
    // 鼠标在container中移动触发事件
    container.onmousemove=debounce(doSomeThing,1000);       
    // 封装防抖函数
    function debounce(fun,wait){
        let timeout;
        return function(){
            let context=this;
            let argus=arguments;
            // 每次触发前先清除之前的定时器，重新计时
            clearTimeout(timeout);
            // setTimeout(要执行的代码, 等待的毫秒数)
            timeout=setTimeout(function(){
                fun.apply(context,argus);
            },wait)
        }
    }
</script>

节流

如果持续触发事件，每隔一段时间，执行一次事件

<style>
    #container{
        height: 200px;
        background-color: rgb(119, 115, 110);
        color: white;
        text-align: center;
        line-height: 200px;
    }
</style>

<div id="container"></div>
<script>
    // 演示事件是如何频繁发生的
    let container=document.querySelector('#container');
    let count=1;
    function doSomeThing(event){
        container.innerHTML=count++;
        console.log(this);
        console.log(event);
    }
    // 鼠标在container中移动触发事件
    container.onmousemove=throttle(doSomeThing,1000);
    // 封装节流函数

    // 方法一：时间戳
    function throttle(fun,wait){
        let old=0;
        return function(){
            let context=this;
            let argus=arguments;
            // 获取当前的时间戳
            // valueOf() 方法返回 Math 对象的原始值
            let now=new Date().valueOf();
            if(now-old>wait){
                // 实现立即执行
                fun.apply(context,argus);
                old=now;
            }
        }
    }

    // 方法二：超时调用
    function throttle(fun,wait){
        let timeout;
        return function(){
            let context=this;
            let argus=arguments;
            if(!timeout){
                timeout=setTimeout(()=>{
                    fun.apply(context,argus);
                    timeout=null;
                },wait)
            }
        }
    }
</script>