节流与防抖

为什么要使用节流或防抖?

• 举一个比较通俗的例子，大家小时候应该都用过计算器，按一次归零键就会响一声，但是如果你短时间内多次按,扬声器就会传出"归归归归归归归归归归归归归零"，这实际上是程序员在编程的时候用了防抖，设想一下如果不这么做会出现什么情况，屏幕上依然会将数字归零，但是语音队列中就会存很多个归零，“归零，归零，归零，归零，归零，归零，归零，归零，归零，归零，归零。。。。。。”，如果这是你还不及时收手，你的计算器很有可能造成内存溢出，出现死机，这个时候放弃挣扎吧，扣电池才是正解！

节流

• 节流的思想就是在一段时间内只会让程序执行一次：
  你可以为节流函数设置一个间隔（即程序每多少秒会触发一次），当触发过一次事件后，只有当经过的总时长大于这个时间间隔，程序才会触发第二次。
• 简单来说节流就是在一段时间内程序只会执行第一次
• 节流的demo，以js为例

		// 开关
        var flag = true;
        // 滚动事件
        document.onscroll = function () {
            // 若当前开关打开执行内部代码
            if (flag) {
                // 关闭开关
                flag = false;
                
                console.log("触发了滚动事件");

                // 一定间隔后打开开关
                setTimeout(function () {
                    flag = true;
                }, 200);
            }
        }

防抖

• 防抖
  防抖跟节流的有一点是相似的，同样都是在一定时间内只让程序执行一次，但是执行最后一次，每执行一次新事件都会把上一次的清除掉
• 简单来说防抖就是在一段事件内程序只会执行最后一次

		var timer = null;
        document.onscroll = function () {
            // 若此时存在timer则清空
            if (timer) {
                clearTimeout(timer);
            }
            // 重新设置计时器
            timer = setTimeout(function () {
                console.log("触发了滚动事件");
            }, 200);
        }