函数节流和函数防抖的实现

1. 函数节流

当我们想要判断滚动条是否到达底部时，简单的做法就是直接监听window对象的scroll事件，然后判断滚动条是否到达底部。可这么做的话，只要滚动条一动，浏览器就触发这个事件，很耗费性能。这时函数节流就可以帮你忙。

函数节流就是函数执行一次折后，在指定时间内不会执行第二次。

 function throttle(fn, delay){
     let canUse = true
     return function(){
         if(canUse){
             fn.apply(this, arguments)
             canUse = false
             setTimeout(()=>canUse = true, delay)
         }
     }
 }
 const throttled = throttle(()=>console.log('hi'))
 throttled()
 throttled()

简单来说，函数的节流就是通过闭包保存一个标记canUse，如果为值为true的话就继续执行函数，判断完标记后立即把这个标记设为false。

2. 函数防抖

比如说有一个注册时实时校验用户名是否被注册的功能，正常来说如果输入框的值发生变化，就要向后端发送请求判断用户名是否存在。但这样的话非常的浪费资源，在这里引入函数防抖就能很好的解决这个问题。

函数防抖：函数执行后超过指定间隔才执行。

function debounce(fn, delay) {
    let timeout = null;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}

用timeout老保存setTimeout 返回的值，每当用户输入的时候吧setTimeout clear，然后在创建setTimeout ，这样函数在超过指定间隔内就不会执行了。

3. 总结

函数节流和函数防抖的原理，其实就是巧妙地使用setTimeout 来存放待执行的函数，用clearTimeout在合适的时机清除待执行的函数。