防抖与节流

前段时间看了看防抖和节流，觉得用处很大，于是自己动手整了下写了写思路，话不多少开始造。
我们先来看一个简单的例子，下面的代码简单的写了一个为窗口添加滚动条事件，并打印滚动条的位置。

    var k=0;
    function showTop() {
        //谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop
        var ing = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：'+ing+'    调用了多少次：'+k+++'次');
    }
    //为窗口添加滚动事件
    window.onscroll = showTop;

按照我简陋的想法来说，从开始滑动到滑动停止难道不就是一次事件么？

然而现实给了我一个残酷的打击

短短的一个距离居然调用了20次方法，这还得了！要是我手贱加点东西进去，我这个程序不就要炸掉！阔怕.jpg
俗话说的好：只要思想不滑坡，办法总比困难多。于是我用我颤抖的右手点进了百度，解决方法如下

防抖（debounce）

思路：在第一次触发事件时，不立即触发函数，等过了规定的时间（比如0.5秒）再触发。
如果在0.5秒内没有再次触发事件，那么就执行函数，反之就不执行，计时重新开始。

效果：如果同一时间内大量触发事件，只会执行一次函数。

代码实现

function debounue(fn,time){
        let Tdata = '';//闭包
        return function(){
            if(Tdata){
                clearTimeout(Tdata);
            }
            Tdata = setTimeout(fn,time);
        }
    }
    var k = 0;
    function showTop() {
        //谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop
        var ing = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：'+ing+'    调用了多少次：'+k+++'次');
    }
    //为窗口添加滚动事件
    window.onscroll = debounue(showTop,500);

运行以上代码，你将会看到无论你滚动条滚动多少下，它只会在你停下0.5秒后运行一次。
哈哈哈，完成了，小菜用颤抖的双手缓缓的把代码写上去，这时需求走了过来，看了看我的功能，展开了一场对话

需求：你这个不行啊，和我要的不一样（沉思脸）
小菜：（震惊）这不是你说的效果么
需求：（笑着拍了拍我的肩膀）年轻人，不要总想着一条思路嘛，再多想想，我看好你哦。
小菜：（缓缓的点了点头，并把40长的大刀拿了出来）

没办法，需求说啥就是啥

节流（throttling）

思考：如果用户不停的触发滚动事件，也可以在间隔某个时间后给出反馈：比如用户不停的滑动十秒，我以每两秒一次的间隔时间，运行了五次

代码实现：

function throttle(fn,time){
        let Tdata = true;
        return function(){
            if(!Tdata){
                return;
            }
            //在间隔期内把状态设置无效
            Tdata = false;
            setTimeout(()=>{
                fn();
                Tdata = true;
            },time);
        }
    }
    var k = 0;
    function showTop() {
        //谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop
        var ing = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：'+ing+'    调用了多少次：'+k+++'次');
    }
    //为窗口添加滚动事件
    window.onscroll = throttle(showTop,1000);

复制以上代码得到的结果：不停的拖动滚动条，它会一开始运行一次，并每隔1秒再次运行，停止滚动后还会运行一次

好了，以上就是防抖和节流的使用方法，方法有很多种，看大家怎么去实现了，菜鸟笔记，大佬喷的时候麻烦指出错误，我会一一修改
<附上大佬链接：https://css-tricks.com/debouncing-throttling-explained-examples/

最后编辑于：2019.07.25 09:58:02