函数节流，防抖

1. 函数节流（throttle）

让一个函数不要执行得太频繁，减少一些过快的调用来节流, 降低促发调用的频率

(1)节流的应用场景

DOM 元素的拖拽功能实现（mousemove）
计算鼠标移动的距离（mousemove）
Canvas 模拟画板功能（mousemove）
搜索联想（keyup）
监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

2. 函数去抖（debounce）

是对于一定时间段的连续的函数调用，只让其执行一次

(1)去抖的应用场景

每次 resize/scroll 触发统计事件
文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

 <label for="username">
        用户名: <input type="text" id="username" name="username">
    </label>
    <script>
        let username = document.getElementById('username'),
        timer =null,
        starttime = null;

        username.onkeyup = function(){
            clearTimeout(timer);
            let curtime = Date.now();
            if(!starttime){
                starttime = curtime;
            }
            if(curtime - starttime > 800){
                console.log(username.value);
                starttime = curtime;
            }else{
                timer = setTimeout(function(){
                    console.log(username.value);
                    },500)
            }
            
            
        }

就算一直没有停止编辑，也会在指定时间后进行事件的触发

原理

当一些操作在没有间断的情况重复连续执行，触发指定的事件，比如keyup,onresize，设置一个定时器，先进行清楚操作，再指定延时来触发定时器里的操作，比如调用一个函数去进行ajax请求，
但是因为触发keyup之类的事件太过频繁，时间间隔小于定时器的延时时间，就会在定时器执行之前再次执行keyup的事件，导致前一个定时器被清除，达到减少定时器里函数执行次数的作用

当我触发一个事件时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行

标准的函数节流的input输入的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>throttle函数节流</title>
</head>
<body>
    请输入:<input type="text" id="printinput">
    <script>
        function print(text){
            console.log('------------------------------------');
            console.log("打印的是:",text);
            console.log('------------------------------------'); 
        }
        
        let printinput = document.getElementById('printinput');
        printinput.addEventListener('keyup',function(){
            throttle(print,null,this.value,1000,500);
            /*throttle参数介绍
            * print ,用来被触发的函数，比如ajax请求
            * context print函数的执行上下文,也就是print函数的this指向
            * text 也就是输入的内容
            * between 执行被触发的函数隔多少毫秒必须被执行一次
            * delay 用来指定定时器延时时间，时间之内的连续操作不会触发目标函数
            */
        },false);

        function throttle(fn,context,text,between,delay){
            clearTimeout(fn.timer);
            fn._cur = Date.now();
            if(!fn._start){
                fn._start = fn._cur;
            }
            /*通过对上一次强制触发函数的时间
            * 与当前事件执行时的时间比较，
            * 当大于给定between就执行一次目标操作
            *并将当前时间赋值给上一次强制触发函数时间
            * 进行时间更新
            */
            if(fn._cur - fn._start > between){
                fn.call(context,text);
                fn._start = fn._cur;
            }else{
                fn.timer = setTimeout(function() {
                    fn.call(context,text);
                }, delay);
            }
        }
    </script>   
</body>
</html>