函数防抖的两种触发形式

非立即执行：时间触发后，n秒后执行n秒内多次触发事件重新开始计算函数执行时间，时间重置

 

<div id="content" </div>

<script>

    let num = 1;

    let content = document.getElementById('content');

    function count() {

        content.innerHTML = num++;

    };

    function debounce(){

        let timer

        let content = this

        let args =arguments

        return function(){

            if(timer){

            clearInterval(timer)

        }

        //点击后0.5秒执行

        timer = setTimeout(function(){

            count.apply(content,args)

        },500)

        }

    }

立即执行：事件触发函数立即执行，n秒内不继续触发才能继续执行函数效果，表现形式为移动触发，n秒内不移动后，再次触发，函数在执行

<div id="content"</div>

<script>

    let num = 1;

    let content = document.getElementById('content');

    function count() {

        content.innerHTML = num++;

    };

    function debounce(){

        var timer

        return function(){

            if(timer){

            clearTimeout(timer)

        }

        if(!timer){

            count()

        }

        timer = setTimeout(function(){

            timer = undefined

        },500)

        } 

    }

    content.onmousemove =debounce();