如何区别防抖与节流 , 如何使用

什么是防抖

防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。  

好处：能够保证用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次

 防抖一般应用于输入框

var timer = null // 1. 防抖动的 timer
function debounceSearch(keywords) { // 2. 定义防抖的函数
     timer = setTimeout(function() {
     // 发起 JSONP 请求
     getSuggestList(keywords)
     }, 500)
}
$('#ipt').on('keyup', function() { // 3. 在触发 keyup 事件时，立即清空 timer
 clearTimeout(timer)
 // ...省略其他代码
 debounceSearch(keywords)
 })

什么是节流 

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。  

节流的应用场景

① 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

② 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

 图片跟随鼠标移动的案例

$(function () {
    // 1. 获取到图片
    var angel = $('#angel')
    // 步骤1. 定义节流阀
    var timer = null
    // 2. 绑定 mousemove 事件
    $(document).on('mousemove', function (e) {
       // 步骤3：判断节流阀是否为空
       if (timer) { return }
       // 3. 设置图片的位置
       // 步骤2：开启延时器
       timer = setTimeout(function () {
         $(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px')
         console.log('ok')
         timer = null
    }, 16)
})

 防抖与节流的区别

• 防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效！前面 N 多次的触发都会被忽略！

• 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！