js手写节流函数

防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间就执行一次，实现原理为 设置一个定时器，约定XX毫秒后执行事件，如果时间到了，那么执行函数并重置定时器，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器。

1、原理：

规定一个时间，n 秒，n秒内，将触发的事件合并为一次并执行。

2、栗子：

班车等人上来之后，5分钟之后开走，不等待，若5分钟还有人过来，也不重置时间。

3、解读：

函数节流（throttle）,指的是某个函数在一定时间间隔内，只执行一次，在这3秒内产生函数调用请求直接无视，也不会影响时间间隔，3秒时间间隔结束后第一次遇到新的函数会触发执行，然后在这新的3秒内依旧无视新的函数请求，以此类推。

4、应用场景:

用在频繁调用函数的场景，如有大量计算，频繁响应会有浪费资源加载的现象。
输入框联想，可以限定用户在输入时，只在每两秒钟内响应一次联想。

5、定时器实现

var throttle = function(func, delay){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                func.apply(context, args);
                timer = null;
            },delay);
        }
    }
}

使用时间戳实现的节流函数会在第一次触发事件时立即执行，以后每过delay秒之后才执行一次，并且最后一次触发事件不会被执行，而定时器实现的节流函数在第一次触发时不会执行，而是在delay秒之后才执行，

6、时间戳实现

使用两个时间戳 prev和now，每次触发事件都判断新时间戳now和旧时间戳prev之间的时间差，如果达到规定时间，执行函数并重置旧时间戳。

var throttle = function (func,delay) {
        var prev = Date.now();
        return function () {
            var context = this;
            var args = arguments;
            var now = Date.now();
            if(now-prev >= delay){
                func.apply(context,args);
                prev = Date.now();
            }
        }
    }

7、使用方法

content.onmousemove = throttle(count,1000);