函数防抖

Posted 2020-10-31 站错队了同志

应用场景

• 在表单注册中，我们往往需要注册input事件实时监听客户输入的值数据库中是否存在，存在就友好的提示客户。但是不可能每次客户输入就触发，那么出现了下面的应用

基本原理

• 利用闭包环境，外部调用的是函数内容的方法，但是timer变量一直都是存在的，控制着最后的回调函数执行时间，每次执行的函数的时间内超过500毫秒就不执行

具体实现

<script>
    let btn=document.getElementsByTagName(‘button‘)[0]
    btn.onclick=debounce(function(){console.log(1) },500);
    function debounce(callback,time){
        let timer;
        return function(){
            window.clearTimeout(timer);
            timer=window.setTimeout(function(){
                callback()
            },time);
        }
    }
</script>