es6防抖函数-示例

18 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button id="btn">++++</button>

</body>
<script>
     
     let i=0;
     const increase=(...args)=>{
        console.log(args)
        i++;
        console.log("i更新了",i)
     }
          

     //防抖函数
   const debounce=(fn,delay=2000)=>{
    let timer=null;
    //返回新函数
    return function(...args){
        clearTimeout(timer)
        timer= setTimeout(()=>{
            //执行源函数
            fn(...args)
        },delay)
     }
    }
    //生成新函数
    let fc=debounce(increase,500) 
     document.getElementById("btn").addEventListener("click",()=>{
        //调用防抖函数
        fc(i)
     })


</script>
</html>