2.1.2 throttle

说明: 在某个规定的时间内只执行一次任务

使用及参数说明:

xui.throttle(fn, await, leading);

• fn表示需要进行节流的函数
• await表示规定的时间, 默认为300ms
• leading表示是否首先触发, 默认为触发, 设置为false后, 进入不触发, 等待await后触发, 离开后await触发
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

1.这里没有使用节流函数, 可以看到鼠标移动的越快, 计数跑的越快, 这个时候看上去没有问题, 但是当我们在函数里进行了一些复杂操作, 比如异步调用等, 此时浏览器肯定会变卡

var eg = document.getElementById('throttle'),
    NUM = 0;
eg.addEventListener('mousemove', function(){
    NUM++;
    eg.innerHTML = 'move ' + NUM + ' times';
});

2.这个时候节流函数就派上用场了, 此时延时为500ms, 意思是不管你移动的多块,500ms内我就是只执行一次

var tar = document.getElementById('throttle1'),
    NUM1 = 0;
tar.addEventListener('mousemove', 
    xui.throttle(function(e){
        NUM1++;
        e.target.innerHTML = 'move ' + NUM1 + ' times';
    }, 500), 
false);

3.这个时候节流函数就派上用场了, 此时延时为500ms, 意思是不管你移动的多块,500ms内我就是只执行一次

var tar2 = document.getElementById('throttle2'),
    NUM2 = 0;
tar2.addEventListener('mousemove', 
    xui.throttle(function(e){
        NUM2++;
        e.target.innerHTML = 'move ' + NUM2 + ' times';
    }, 500, true), 
false);