首页 > 编程语言> 文章详细

JavaScript函数节流

2021-02-23 18:01:01 阅读：193 来源： 互联网

标签：function last 节流 JavaScript 事件 setTimeout 函数

一、前言

相对于函数防抖来说，函数节流的应用场景和频次更大一些。当然，如果想复习函数防抖，请点击《函数防抖》。废话不多，上正题：

二、什么是函数节流

我们设想一个进地铁站过闸机的场景：每位乘客在刷卡进入之后，大约2秒后门关闭，下一个乘客才能刷卡进入。如果上一个乘客刷卡之后还没有进入或者闸机还未关闭，此时另一个乘客在当前闸机是刷不上卡的。这就是一种节流的操作。

节流函数：不管事件的触发频率有多高，只会间隔设定的时间执行一次目标函数。简单来说：每隔单位时间，只执行一次

三、为什么要函数节流

某些情况下，浏览器的一些高频事件对于用户来说其实并没有太大必要，比如懒加载中的scroll事件。但是如果使用函数防抖的话，只有用户停止滚动后，才会判断是否到了页面底部；如果使用函数节流，只要页面滚动就会间隔一段时间判断一次，即保留了用户体验，又提升了执行速度，节省资源。

四、如何实现函数节流

方法1：利用延时器
实现原理：提前定义容器变量用来保存setTimeout的返回值，在每次触发事件，准备开启新的setTimeout之前，先检查容器变量中是否保存有setTimeout的返回值，如果有，那么不再开启setTimeout，保证同一时间只有一个setTimeout存在。setTimeout执行完毕之后，手动清空容器变量的返回值。

var t = null;
document.onmousemove = function (){
    if(t) return;
    t = setTimeout(() => {
        console.log("函数节流");
        t = null;
    }, 300);
}

封装之后：

document.onmousemove = throttle(function(){
    console.log("函数节流");
})

// 函数节流
function throttle(cd,time=300){
    var t = null;
    return function(){
        if(t) return;
        t = setTimeout(() => {
            cd.call(this);
            t = null;
        }, time);
    }
}

方法2：利用时间戳
实现原理：提前设定变量，准备存储事件结束后的时间戳，在事件开启之后，立即保存时间戳，并判断当前时间戳和事件结束后的时间戳的差值，决定是否需要执行本次事件。事件执行完毕之后，保存事件结束时的时间戳，以供下次开启事件时计算差值。

var last = 0;
document.onmousemove = function(){
    var now = new Date().getTime();;
    if (now - last > 300) {
        console.log("函数节流")
        last = new Date().getTime();;
    }
}

封装之后

document.onmousemove = throttle(function(){
    console.log("函数节流")
})

function throttle(cb, wait=300){
    let last = 0;
    return function(){
        var now = new Date().getTime();;
        if (now - last > wait) {
            cb.call(this);
            last = new Date().getTime();;
        }
    }
}

五、函数节流的应用场景

一些高频事件，在被连续触发时，需要限定在单位时间内只执行一次，如：

DOM 元素的拖拽（mousemove）
射击游戏在单位时间只能发射一颗子弹（mousedown/keydown）
Canvas 模拟画板功能（mousemove）
搜索联想（keyup）
懒加载，在滚动过程中判断是否需要加载图片（scroll）
页面滚动到底部加载更多（scroll）

以上，如有纰漏或不同观点，欢迎留言讨论…

标签：function,last,节流,JavaScript,事件,setTimeout,函数
来源： https://blog.csdn.net/weixin_41636483/article/details/113997869