关闭

【JavaScript】函数节流

标签: javascript函数节流
596人阅读 评论(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);
    }

结果:
这里写图片描述

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:200012次
    • 积分:3008
    • 等级:
    • 排名:第11677名
    • 原创:102篇
    • 转载:5篇
    • 译文:1篇
    • 评论:124条
    最新评论