js实现防抖和节流

最新推荐文章于 2024-10-15 18:49:00 发布

前端认真点

最新推荐文章于 2024-10-15 18:49:00 发布

阅读量204

点赞数

文章标签： js 防抖节流 es6

本文链接：https://blog.csdn.net/qq_40194500/article/details/97753740

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖</title>
</head>
<body>
    <div>
        <button class="fangdou ">
            点我哈哈
        </button>
        <button class="jieliu">
            节流
        </button>
    </div>
</body>
<script>
    let fangdoubtn=document.querySelector(".fangdou");// 防抖是避免一直操作
    fangdoubtn.addEventListener("click",debounce(saytime))

    function debounce(fn){
        let timeout=null;
        return function (){
            clearTimeout(timeout);
            timeout=setTimeout(()=>{
                fn.call(this,arguments);
            },1000)
        }
    }
    function saytime(){
        console.log("成功：)");
    }

    let jieliu=document.querySelector(".jieliu"); //节流的作用是隔一段时间执行一次
    jieliu.addEventListener("click",throttle(sayttle));

    function throttle(fn){
        let throttleid=true;
        if(!throttleid){
            return;
        }
        return function(){
            setTimeout(()=>{
                fn.call(this,arguments);
                throttleid=false;
            },1000)
        }
    }
    function sayttle(){
        console.log("节流成功")
    }
</script>
</html>