手写函数防抖

防抖的定义：

事件响应函数在一段时间后才执行，如果在这段事件内再次调用函数，则重新计算执行时间

不防抖的危害：

1. 发送过多的请求，服务器瘫痪
2. 影响性能，出现卡顿

防抖的应用场景：

1. scroll 事件滚动触发
2. 搜索框输入查询
3. 表单验证
4. 按钮提交事件
5. 浏览器窗口缩放，resize事件

Underscore

一个JavaScript实用库，提供了一整套函数式编程的实用功能，里边有防抖函数,就是这个哥们_.debounce

<div id="contant"></div>
<button id="btn">取消防抖</button>
<script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore.js"></script>
<script>
  let count = 0;
  const contant = document.querySelector("#contant");
  function doSomeThing(){
    //可能会做回调函数或者ajax请求
    contant.innerHTML = count++;
  }
  // 高阶函数 防抖
  contant.onmousemove = _.debounce(doSomeThing,1000,false); //第三个参数=>是否立即执行 默认为false
  // 事件响应函数在一段时间后才执行，如果在这段事件内再次调用，则重新计算执行时间
  // 当预定的时间内没有再次调用该函数，则执行doSomeThing
</script>

既然都有现成的了，为啥还要手写防抖函数呢，因为underscore不仅仅包含了防抖函数，还有许多其他的方法，大小有6.5KB(生产版)
如果只是需要underscore里的debounce防抖函数就引用underscore是不是很浪费，所以直接手写一个debounce函数，代码也不多啦

function debounce(func, wait, immediate){
    let timeout;
    let result;
    let debounced =  function(){
        let context = this;   
        let args = arguments; //event指向
        if(timeout) clearTimeout(timeout);
        if(immediate){
            let callNow = !timeout;
            timeout = setTimeout(()=>{
                timeout = null;
            },wait)
            // 立即执行
            if(callNow) result = func.apply(context, args);
        }else{
            // 不会立即执行
            timeout = setTimeout(function(){
                result = func.apply(context, args);
            }, wait)
        }
        return result;
    }
    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;

    }
    return debounced;
}
//=====================以上是防抖函数=====================
let count = 0;
const contant = document.querySelector("#contant");
const btn = document.querySelector("#btn");
function doSomeThing(e){
    // event指向问题
    console.log(e);
    // 改变执行函数的this指向问题
    console.log(this);
    // 可能会做回调函数或者ajax请求
    contant.innerHTML = count++;
    // 有return的时候
    return 123;
}
let doSome = debounce(doSomeThing, 10000)

// 取消防抖
// 万一事件函数执行着，执行着，你不想执行了，10s好漫长，不执行也罢，可以取消防抖哦
btn.onclick = function() {
    doSome.cancel();
}
// 高阶函数 防抖
contant.onmousemove = doSome;

当然也可以找到underscore的源码，ctrl+c ctrl+v，但是，手敲一遍，会让你醍醐灌顶，不禁发出 哦~~，原来是这样