js 防抖

最新推荐文章于 2024-02-23 07:44:32 发布

是你现任没错了

最新推荐文章于 2024-02-23 07:44:32 发布

阅读量303

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43527043/article/details/126948921

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

防抖则是通过setTimeOut的方式，在所设置时间间隔内，将多次触发变成第一次触发。（也就是你点按钮，你一直点，在这个间隔内只回应一次）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="submit" id="input">
<script type="text/javascript">

    var btn=document.getElementById('input');
    btn.addEventListener('click',abdand(submit,2000,true),false);
    function submit(e){
        console.log(this)
        console.log(e)
    }
    // 第一次点击;
    function abdand(fn,timer,triggleNone){
        var t=null //t不等于null就不是第一次

        return function(){
            //console.log(arguments[0])
         // 判断计时器是否存在
            if(t){
                clearTimeout(t);
            }

<!--            t=setTimeout(function(){-->
<!--            // 只有函数内部才会存在arguments，故此函数与上一层对应的arguments不同-->
<!--                fn(arguments[0])-->
<!--            },1000 );-->
             // 为了可以调用外部函数的arguments可以使用箭头函数
             if(triggleNone){
                //triggleNone表示第一次点击直接执行
                var firstClick=!t
                //如果是第一次点击，则直接执行
                if(firstClick){
                    fn.apply(this,arguments)
                }
                //若不是第一次点击，则当计时器时间到了之后将t重新置为null，此时再点击则为第一次点击
                t=setTimeout(()=>{
                    t=null;
                 },timer);
             }
             else{
                 t=setTimeout(()=>{
                    //apply接收两个参数，第一个参数是this的指向，第二个参数是函数接收的参数，以数组的形式传入
                    fn.apply(this,arguments)
                 },timer);
             }

        }
    }


</script>




</body>
</html>