防抖和节流函数

防抖和节流函数都是为了解决事件高频触发的问题，例如在点击注册按钮时，如果用户持续点击，将会一直发送请求到服务器，可以使用防抖函数来减少对服务器的压力。实际执行的是闭包函数，当调用时会直接返回一个闭包函数，在调用防抖和节流函数时，第一个参数必须为函数(函数调用无效)，第二个参数为时间

防抖函数

1.原理：

当持续触发事件时，在一定时间内没有再次触发事件，事件才会执行函数一次，如果在设置的时间到来前，再次触发了事件，则重新启动定时器，只会执行时间结束后最后一次触发的事件

2.应用场景：

1. 滚动条事件scroll

2. 输入框输入值时

3. 按钮的提交事件

3.代码：

//防抖函数
//实际执行的是闭包函数，当调用时会直接返回一个闭包函数
function debounce(func,time){
    var timerid = null
    return function(){
        //如果timerid有值，就清除
        if(timerid){
            //先销毁之前的定时器
            clearTimeout(timerid)
        }
        //在创建新的定时器
        timerid = setTimeout(function(){
            func()
        },time)
    }
}

节流函数

1. • 原理：

在持续触发事件时，在一定时间内只调用一次函数，如果在一定的时间内再次触发此事件，则不会执行，主要目的就是持续触发事件时减少事件的触发频率

2. • 应用场景：

1. 搜索框输入值时

2. 点击提交按钮时

3.代码：

//节流函数
function throttle(func,time){
    var timerid = null
    return function(){
        if(!timerid){
         //如果定时器不存在，则创建一个新的定时器
            timerid = setTimeout(function(){
                func()
                clearTimeout(timerid)
                timerid = null
            },time)
        }
    }
}