【JavaScript】函数节流

问题:

在前端开发中,浏览器的某些操作和处理要其他的昂贵很多。比如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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaScript 函数节流是一种常用的优化技术,它可以限制函数的调用频率。通常情况下,如果我们在 JavaScript 中绑定一个事件处理函数,比如绑定一个滚动事件,当用户滚动页面时,这个事件处理函数会被频繁地调用。但是,有时候我们并不希望函数被这么频繁地调用,因为这会导致性能问题,甚至可能导致浏览器崩溃。这时候,我们就可以使用函数节流来优化这个函数函数节流的基本原理是,在一段时间内(通常是一个固定的时间间隔)只允许函数被调用一次。如果在这段时间内再次调用这个函数,则会忽略后续的调用,直到这段时间结束。这样,就可以保证函数不会被频繁地调用,从而提升性能。 下面是一个简单的函数节流的例子: ``` function throttle(func, delay) { let timer = null; return function() { if (!timer) { timer = setTimeout(() => { func.apply(this, arguments); timer = null; }, delay); } } } ``` 在这个例子中,我们定义了一个函数 `throttle`,它接受两个参数:`func` 和 `delay`。`func` 是要被节流的函 ### 回答2: JavaScript函数节流是一种优化技术,用于减少在高频率触发的场景中函数被执行的次数。函数节流的核心思想是限制函数在一定时间内的执行次数,以便提高性能和用户体验。 实现函数节流的一种常见方式是使用定时器。具体步骤如下: 1. 创建一个变量来保存定时器的标识符。初始化为null。 2. 在每次触发函数之前,先检查定时器是否存在。 3. 如果定时器存在,则说明函数正在等待执行,直接返回,不执行任何操作。 4. 如果定时器不存在,则清空之前的定时器,创建一个新的定时器。 5. 在定时器中设定一个延迟时间,当延迟时间到达后执行函数。 6. 在函数内部的逻辑执行完成后,将定时器标识符设置为null,表示函数可再次被触发。 通过设置适当的延迟时间,可以控制函数的执行频率。当函数被触发时,如果在延迟时间内再次被触发,延迟时间会被重置,函数的执行会被推迟。这样可以确保函数在一定时间内只执行一次,减少了频繁执行函数的开销。 函数节流可以应用于各种场景,例如监听浏览器滚动事件、窗口大小改变事件或者用户输入事件等。在这些场景中,由于事件的触发频率较高,如果不使用函数节流,会导致函数的执行频率过高,影响性能和用户体验。 总之,JavaScript函数节流是一种通过限制函数在一定时间内执行的次数来提高性能和用户体验的优化技术。 ### 回答3: JavaScript函数节流是一种优化技术,用于控制函数的执行频率。当函数被频繁触发时,节流技术可以将函数的执行间隔固定在指定的时间段内。 实现函数节流需要定义一个时间阈值,比如500毫秒。当一个函数被调用时,会先判断距离上次执行函数的时间是否超过了阈值。如果超过了阈值,那么立即执行函数,并更新上次执行函数的时间。如果没有超过阈值,那么等待下次执行函数的时机。 一个简单的节流函数的实现如下: ``` function throttle(func, wait) { let timer = null; return function() { if (!timer) { timer = setTimeout(() => { func.apply(this, arguments); timer = null; }, wait); } }; } ``` 这个函数接收两个参数:需要节流函数func和时间阈值wait。当调用节流函数返回的函数时,会判断是否存在一个定时器。如果不存在,则创建一个定时器,在指定的时间间隔后执行函数func,并重置定时器。如果存在定时器,则无操作。 这样就可以保证在一个时间间隔内,函数最多只会被执行一次。节流技术可以有效减少频繁调用函数带来的性能损耗,提高网页的响应速度。比如在处理滚动事件、窗口大小调整等场景下,使用函数节流可以避免过于频繁的函数调用,从而提升页面的性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值