1. 什么是防抖
防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n
秒内事件又被触发，则重新计时。
好处，事件被频繁触发的时候，只执行最后一次，节省性能防抖的应用场景
用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，
这样可以有效减少请求次数，节约请求资源；
2.什么是节流
节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。
一段时间内点击多次，算一次
节流的应用场景
鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。
当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。
每次执行操作前，必须先判断节流阀是否为空。总结防抖和节流的区别
防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！
节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！使用节流优化鼠标跟随效果$(function() {var angel = $('#angel')var timer = null // 1.预定义一个 timer 节流阀$(document).on('mousemove', function(e) {if (timer) { return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒timer = setTimeout(function() {$(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')timer = null // 2.当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器}, 16)})
})
3.鼠标搜索案例
<!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>Document</title><!-- 导入页面的基本样式 --><link rel="stylesheet" href="./css/search.css" /><!-- 导入 jQuery --><script src="./lib/jquery.js"></script><!-- 导入模板引擎 --><script src="./lib/template-web.js"></script>
</head><body><div class="container"><!-- Logo --><img src="./images/taobao_logo.png" alt="" class="logo" /><div class="box"><!-- tab 栏 --><div class="tabs"><div class="tab-active">宝贝</div><div>店铺</div></div><!-- 搜索区域（搜索框和搜索按钮） --><div class="search-box"><input id="ipt" type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">搜索</button></div><!-- 搜索建议列表 --><div id="suggest-list"></div></div></div><!-- 模板结构 --><script type="text/html" id="tpl-suggestList">{
{each result}}<!--搜索建议项--><div class="suggest-item">{
{$value[0]}}</div>{
{/each}}</script><script>$(function () {// 1. 定义延时器的Idvar timer = null// 定义全局缓存对象var cacheObj = {}// 2. 定义防抖的函数function debounceSearch(kw) {timer = setTimeout(function () {getSuggestList(kw)}, 500)}// 为输入框绑定 keyup 事件$('#ipt').on('keyup', function () {// 3. 清空 timerclearTimeout(timer)var keywords = $(this).val().trim()if (keywords.length <= 0) {return $('#suggest-list').empty().hide()}// 先判断缓存中是否有数据if (cacheObj[keywords]) {return renderSuggestList(cacheObj[keywords])}// TODO:获取搜索建议列表// console.log(keywords)// getSuggestList(keywords)debounceSearch(keywords)})function getSuggestList(kw) {$.ajax({url: 'https://suggest.taobao.com/sug?q=' + kw,dataType: 'jsonp',success: function (res) {// console.log(res)renderSuggestList(res)}})}// 渲染UI结构function renderSuggestList(res) {if (res.result.length <= 0) {return $('#suggest-list').empty().hide()}var htmlStr = template('tpl-suggestList', res)$('#suggest-list').html(htmlStr).show()// 1. 获取到用户输入的内容，当做键var k = $('#ipt').val().trim()// 2. 需要将数据作为值，进行缓存cacheObj[k] = res}})</script>
</body></html>