js防抖与节流

在开发中会遇到大量的需要用防抖与节流去解决的问题，防抖和节流是对高频触发的任务的解决的两种思路；

概述

现在考虑一种情况：窗口侧面有滚动条，当我们滚动页面到一定的距离时会出现一个回到顶部的按钮。代码实现并不困难

function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll  = showTop

但是当我们在实际运行时，鼠标点击一下滚动条，该函数就会执行多次。触发频率过高，虽然浏览器能够运行，但是如果我们放任不管触发率到达一定的次数就会导致浏览器资源耗尽而卡死。
为了解决这个问题，提出了两种解决思路

防抖

防抖： 在短时间内连续触发的事件，在一定的时间限制内事件处理函数只执行一次
例如，在2秒内判断滚动条与顶部位置的函数只执行一次。那么用户第一次点击滚动条，若2秒内不再点
击，则执行函数；若2秒内再次点击滚动条，则清空计时，从当前开始重新计时。

节流

节流 在短时间内大量出发的事件，第一次触发事件处理函数后，一定的时间内不会再出发处理函数，知道改时间间隔后才会再次触发
例如，间隔2秒触发函数一次。用户一直拖拽滚动条，那么处理函数就会以2秒的间隔持续触发。