javascript 去抖

Posted 2021-05-03

{
    let box = document.querySelector("body");
    box.style.height = "1000px";

    function handle(e)
    {
        console.log("e",e.x,e.y);
        box.innerHTML = `${e.x},${e.y}`;
    }
    box.addEventListener('mousemove',debounce(handle,1000));
    function debounce(fn,wait)
    {
        let timeId = null;
        return function()
        {
            if(timeId!=null)
               clearTimeout(timeId);
            let args = arguments;
            console.log(args);
            //或者写成箭头函数，但注意箭头函数的arguments指向的是外层函数的arguments，这时候就不用赋值args了。
             timeId = setTimeout(()=>{fn.apply(this,arguments)},wait);
            //timeId = setTimeout(function(){fn.apply(this,args);},wait)
            //立即执行
            //timeId = setTimeout(fn.apply(this,arguments),wait);   
        }
    }
}