防抖与节流详解

什么是防抖？
防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。例如：王者荣耀中的回城机制，被中途打断后必须要重新回城，重新读条。

防抖的应用场景：
用户在输入框中连续输入一串字符时，可以通过防抖策略，只有在输入完后，才执行查询的请求，这样可以有效减少次数，节约请求资源。
例如：实现输入框的防抖

var timer =null;						//1.防抖动的timer，这个接收定时器返回的容器timer为了性能最好定义在函数外
function debounceSearch(keywords) {		//2.定义防抖的函数
	timer = setInterval(function(){		//3.使用定时器
	getSuggestList(keywords)			//4.发起JSONP请求
	},500)
}
$('#ipt).on('keyup',function(){			//5.在触发keyup事件时，立即清空timer
	clearInterval(timer);
	//...省略其他代码
	debounceSeach(keywords)
})

典型的例子：
淘宝的搜索框内，输入任何关键字，一定时间的延迟后下方弹出与之相关的商品列表。
①引入模板字符串art-template

    <script src="./lib/template-web.js"></script>

②定义模板结构

<script type="text/html" id="tpl-suggestList">
        {{each result}}
        <div class="suggest-item">{{$value[0]}}</div>
        {{/each}}
    </script>

③绑定事件

//给搜索框绑定键盘抬起事件，获取输入的内容
var keywords = $(this).val().trim();
//调用获取联想列表
getSuggestList(keywords);

④定义获取联想列表的函数

//通过jquery jsonp获取到接口地址的数据内容,jsonp跨域请求。
$.ajax({
    url: '...' + kw,
    dataType: 'jsonp',
    success: function(res) {
    //渲染页面结构
         renderSuggestList(res);
    }
})

⑤渲染页面的函数

//把从服务器返回的数据作为参数传入该函数
//调用template方法，第一个参数传模板结构的id名，第二个参数名传该函数的形参名
//然后
var html = template('tpl-suggestList', res);
$('#suggest-list').html(html).show();

什么是节流？
节流策略:顾名思义，可以减少一段时间内事件的触发频率。

节流策略应用场景：
①鼠标连续不断的触发某事件（如点击），只在单位时间内只触发一次；
②懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费cpu资源
例如：倒计时

    <button id="btn">开始倒计时</button>

var btn = document.querySelector('#btn');
        var num = 10;
        var timer = '';
        var flag = true;
        btn.onclick = function() {
            // 添加flag完成节流。当我们重复做件事情的时候，要求在做的过程中（或者做这件事情的时间段内）不能被打扰，等到做完了才能再做这件事情。
        if (flag) {
            flag = false;
            timer = setInterval(function() {
                num--;
                if (num <= 0) {
                    clearInterval(timer);
                    btn.innerHTML = '开始倒计时';
                    num = 10;
                    flag = true;
                    } else {
                        btn.innerHTML = num;
                    }
                }, 1000)
            }
        }