【JavaScript】函数节流

来源：互联网发布：手机淘宝天天特价编辑：程序博客网时间：2024/04/29 06:53

问题：

在前端开发中，浏览器的某些操作和处理要其他的昂贵很多。比如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);    }

结果：
这里写图片描述

建议：只要是代码周期性执行的，最好都使用节流

0 0