关闭

【JavaScript】函数节流

标签: javascript函数节流
1222人阅读 评论(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网站的观点或立场

JavaScript 节流函数 Throttle 详解

在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发。比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove)。也就是说用户在触发这些浏...
  • u013510614
  • u013510614
  • 2016-07-15 20:23
  • 6224

js性能优化之函数节流

最近在看一些书的时候,以及面试题的时候看到一个新词“函数节流” 函数节流的场景出现在,Js中很多函数的触发并不是用户直接控制的,在这些情况下,函数可能会被非常频繁的调用,而造成大的性能问题。函数被...
  • sinat_25127047
  • sinat_25127047
  • 2017-04-25 11:42
  • 400

JS性能优化 -- 函数节流

函数节流的概念、用途及意义
  • ning0_o
  • ning0_o
  • 2016-11-24 11:10
  • 463

JavaScript中函数节流的理解

函数节流的原理 函数节流,就是对会频繁触发的函数事件做一些限制,让这些函数可以在每隔一定的时间或者每次满足一定的条件下再触发。一般我们会给他起一个名字throttle。也就是节流的意思。一般...
  • alex8046
  • alex8046
  • 2016-07-18 11:13
  • 305

JavaScript函数节流与函数去抖

介绍 首先解释一下这两个概念: 函数节流(throttle):是让一个函数无法在很短的时间间隔内连续调用,当上一次函数执行后过了规定的时间间隔,才能进行下一次该函数的调用。 函数去抖(debou...
  • dyllove98
  • dyllove98
  • 2013-07-09 14:29
  • 3664

js函数防抖与函数节流

区别 de(bounce防抖):当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。比如:如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。 throttle...
  • hj7jay
  • hj7jay
  • 2017-02-09 09:26
  • 2032

JS函数节流

函数节流的原理 函数节流的原理挺简单,那就是定时器。当我触发一个事件时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTi...
  • fengyinchao
  • fengyinchao
  • 2016-02-26 14:11
  • 1405

JS函数节流(throttle)和函数去抖(debounce)

看到一篇不错的文章,不仅函数挺有用的,而且设计思想也启发了我——从常见事物中发现规律,提取抽象出通用的规则,能简化流程提升效率 -----------------------------------...
  • changshenglugu
  • changshenglugu
  • 2015-04-17 17:33
  • 1637

js中连续触发事件的稀释方法(函数节流、函数防抖、标识变量)

在浏览器中操作DOM比非DOM交互需要更多的内存和CPU的事件,连续尝试进行过多的DOM相关操作可能UI导致浏览器挂起,有时甚至会崩溃。尤其在IE中使用onresize事件处理程序的时候容易发生,当调...
  • charlene0824
  • charlene0824
  • 2016-07-31 19:15
  • 3660

JavaScript函数节流与函数去抖

介绍 首先解释一下这两个概念: 函数节流(throttle):是让一个函数无法在很短的时间间隔内连续调用,当上一次函数执行后过了规定的时间间隔,才能进行下一次该函数的调用。 函数去抖(debou...
  • dyllove98
  • dyllove98
  • 2013-07-09 14:29
  • 3664
    个人资料
    • 访问:312207次
    • 积分:3742
    • 等级:
    • 排名:第10007名
    • 原创:102篇
    • 转载:5篇
    • 译文:1篇
    • 评论:143条
    最新评论