事件节流

在写前端页面的表单验证时，经常会遇到输入框输入内容的时候进行表单的验证，或者浏览器窗口缩放的时候触发一个事件，亦或是浏览器发生滚动的时候触发函数。

由于输入、浏览器窗口缩放、页面滚动都是在很快的时间内发生的事情，如果每次输入或者缩放窗口都要去执行ajax请求的话，会影响页面的性能，此时，我们就需要用到事件节流。

下面写两种比较常用的事件节流方法

方法一：setTimeout（消除抖动）

var timer;
$("#phone").on("keyup",function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        alert("输入内容进行判断");
    },500)
});

我们希望用户只有在最后一次输入的时候才会进行判断，以上代码每次输入的时候，都会重置计时器，只有当用户输入后时间超过0.5秒（用户结束输入）才会进行判断，弹出“输入内容进行判断”弹窗，平时项目中这里就可以写ajax请求了。

方法二：计时器节流

$(document).ready(function() {
    var scrolled = false;

    $(window).scroll(function() {
        scrolled = true;
    });

    setInterval(function() {
        if (scrolled) {
            checkScrollPosition();
            scrolled = false;
        }
    }, 250);

    checkScrollPosition();
});

文档加载完成后给定一个scrolled为false，当页面滚动的时候scrolled为true，计时器每隔250毫秒执行一次，判断scrolled的值是否为true，若为true则执行checkScrollPosition（），并且将scrolled赋值为false。