手写节流与防抖

节流与防抖是前端项目开发中，节约请求资源的一种实用方式，实现方式也很简单。下面分别介绍其原理与实现：

 1. 节流函数(throttle）：需要频繁触发的函数，在设定规定时间内，函数只触发一次，后面的触发要等间隔时间。（可以理解为：放技能需要等冷却）

应用场景：鼠标点击、滚轮事件

实现方式：一般采用时间戳

    //fn:要被节流的函数  delay：间隔时间
    function throttle(fn, delay) {
        let lastTime = 0; //记录上一次的函数触发时间

        return function() {
            let nowTime = Date.now(); //记录本次的函数触发时间
            if (nowTime - lastTime > delay) {
                return fn.apply(this); //修正this指向
                lastTime = nowTime;
            }
        }
    }
    document.onscroll = throttle(function() {
        console.log('throttle函数执行了' + Date.now());
    }, 600)

2. 防抖函数(debounce)：在规定时间内，需要频繁触发的函数，每次触发会重新计时，只让函数最后一次的触发生效。（可以理解为：连续点回城只有最后一次能成功）

应用场景：用户在input框不断输入值时、不断的调整浏览器窗口大小时

实现方式：一般采用定时器

    function debounce(fn, delay) {
        var timer = null;
        return function() {
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn.apply(this);
            }, delay);
        }
    }
    document.onscroll = debounce(function() {
        console.log('debounce函数执行了' + Date.now());
    }, 1200)

3. 什么时候用节流或者防抖？

可以想象：

        为了避免用户太多点击事件或者滚轮滑动太过频繁，导致请求资源太多对服务器造成压力过大，需要限制时间间隔让服务器缓口气。这时就需要节流！

        对于输入框中填入密码这种，每输入一个字符且没有输入完毕时，没必要实时监控变化，可以给它一个时间段，从而避免频繁请求资源。这时就可以用防抖！