【JavaScript】函数节流

最新推荐文章于 2024-02-26 16:56:39 发布

季诗筱

最新推荐文章于 2024-02-26 16:56:39 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： javascript 函数节流

本文链接：https://blog.csdn.net/xiaozhuxmen/article/details/51555842

版权

javascript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

问题：

在前端开发中，浏览器的某些操作和处理要其他的昂贵很多。比如DOM操作，连续尝试进行过多的DOM操作可能会导致浏览器挂起，有时候甚至会崩溃。比如，开发中，我们有时会为页面绑定resize事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定mousemove），这种事件有一个特点，可能在一个短的时间内触发非常多次事件绑定程序。这个时候，如果你为这些事件绑定一些操作DOM节点的操作的话，那就会引发大量的计算，在用户看来，页面可能就一时间没有响应，这个页面一下子变卡了变慢了。

解决办法：

函数节流

函数节流：基本思想，通过设置定时器，让一些代码不能够在没有间断的情况下连续重复执行。第一次调用函数时，创建一个定时器，在指定时间间隔之后运行代码。第二次调用函数时，清除前一次的定时器并设置另一个计时器。

举个栗子：

需求：浏览器窗口改变的时候需要改一些页面元素大小，于是要用到window的resize事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>测试页面</title>
</head>
<body>
    <script type="text/javascript">
/*======测试函数节流======*/
    n=0;
    function resizeHandler(){
        console.log(new Date().getTime());
        console.log(++n);
    }
    window.onresize = resizeHandler;
    </script>
</body>
</html>

运行一下：
这里写图片描述
可以看到，我只是简单改变了一下窗口大小，竟然调用了这么多次resize函数。resizeHandler()方法的代码可能会很复杂，甚至会使用ajax向服务器发送请求，简单的一次改变窗口大小就要调用这么多次，天了噜……
可以看到，resize方法是知道窗口大小不再改变，否则会一直调用。鼠标的mousemove也类似，其特点是：
1. 短时间内连续多次重复触发 ;
2. 大量的 DOM 操作。

这时候，我们就可以使用函数节流了。这里提供两种函数节流的方法：

1、tId设为函数的一个变量保存

这种方法是《JavaScript高级程序设计》中提到的。

function throttle (method,context,delay) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function () {
        method.call(context);
    },delay)
}

该函数首先清除之前设置好的任何定时器。定时器ID是存储在函数的tId属性中的（第一次把方法传给throttle（）的时候，这个属性可能并不存在）。
来看一下效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>测试页面</title>
</head>
<body>
    <script type="text/javascript">
/*======测试函数节流======*/
    //函数节流
    function throttle (method,context,delay) {
        clearTimeout(method.tId);
        method.tId = setTimeout(function () {
            method.call(context);
        },delay)
    }
    //页面处理
    n=0;
    function resizeHandler(){
        console.log(new Date().getTime());
        console.log(++n);
    }
    //window.onresize = resizeHandler;
    //调用函数节流
    window.onresize = function () {
        throttle(resizeHandler,null,100);
    }
    </script>
</body>
</html>

运行后，再看控制台：
这里写图片描述

果然，函数没有重复的调用。

2、闭包形成私有的作用域存放定时器变量tId

//用闭包实现函数节流
function throttle2 (fn,delay) {
    var timer = null;
    return function () {
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context,args);
        },delay);
    };
}

//调用
window.onresize = throttle2(resizeHandler,100);
    }