[JavaScript知识库]js通过settimeout实现防抖功能（亲测有效）

 function toast(text, time) {
        let toast = document.getElementById('toast');
       let toast_box = document.getElementsByClassName('toast_box')[0];
       toast.innerHTML = text;
       toast_box.style.animation = 'show 1.5s';
       toast_box.style.display = 'inline-block';
    setTimeout(function(){
        toast_box.style.animation = 'hide 1.5s';
     setTimeout(function(){
        toast_box.style.display = 'none';
    }, 1000)
    }, time)
   }

如上代码是一个简单的toast（弹窗），在弹窗的时候会有一段时间之后将弹窗隐藏起来，那么如果重复点击会有什么情况呢

就是我们的弹窗会有若干个settimeout的函数来将我们的style.display设为none

那么我们需要处理一个功能就是让我们的事件在规定时间内只触发一次

   function fn(callback){
        fn.prototype.init(callback);
    }
            
    fn.prototype = {
        canclick: true,
         init: function(callback){
      if(this.canclick){
        this.canclick = false
   callback();
   setTimeout(function(){
        this.canclick = true
    }.bind(this),2500)
      }else{
        console.log('1s中之内不允许重复点击');
    }
         }
            }

那么如上图，我们的第一个函数是将我们的callback函数传递到fn的prototype的init中。

在第二个函数中，我们定义了两个属性，在第二个属性是init属性中定义了一个方法接收我们传递进来想要绑定防抖的函数callback，在setimeout中进行了允许点击状态的切换，只有在规定时间内才能将我们的可点击状态进行切换

     $(".a").click(function(){
        console.log("a");
    fn(function(){
        toast("异常提醒", 1400);
    });
            })

这里用jquery中的$(".类名")来进行特定元素的绑定