函数节流

最新推荐文章于 2021-11-05 15:04:38 发布

Chaney__Chen

最新推荐文章于 2021-11-05 15:04:38 发布

阅读量649

点赞数

分类专栏： web前端文章标签：闭包函数节流定时器 javascript 前端开发

本文链接：https://blog.csdn.net/Chaney__Chen/article/details/53781575

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.为什么用到函数节流？

最近在做瀑布流的页面时，使用到了window.onresize事件，功能页面却是实现了，但是console.log打印了一下，却发现拖动窗口时执行了大量次数，可想对于浏览器渲染页面的性能影响有多大。于是乎Google告诉了我函数节流。

2.函数节流思想

其实函数节流的思想很简单，就是定时器，让实行的频率降低下来，可参考一下代码。

    window.onresize = throttle(function () {
        console.log(document.documentElement.clientWidth);
    }, 400);

    //使用了闭包实现函数节流
    function throttle(fn, delay) {
        var timer = null;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(fn, delay)
        }
    }