节流（Throttle）_IT分享知识网

大家好，欢迎来到IT知识分享网。

一、什么是节流？

节流是一种前端优化事件处理性能的技术，主要用于控制一段时间内某个函数的执行频率，确保该函数不会因为频繁触发而过于密集地被执行。如果事件连续快速地被触发多次，节流函数会限制执行次数，在规定的时间间隔内只执行一次。

二、节流的应用场景

节流的应用场景跟防抖类似。

页面滚动加载：在用户滚动浏览长网页时，可以通过节流来控制数据的动态加载，确保不会因为滚动事件过于频繁而无休止地向服务器请求新内容。
搜索建议：在搜索框中输入文字时，每次输入字符都会触发事件，但通过节流可以大大控制向服务器请求搜索建议的频率，避免频繁请求影响体验和提高服务器压力。
地图拖拽和平移：地图组件在用户拖动时会产生大量移动事件，节流可以保证减少地图上的标记或其他实时更新的内容的刷新次数，而不是每一次细微的移动变化都会刷新。
触摸滑动与手势识别：对于触摸屏设备上的滑动手势，连续的touchmove事件可能会非常密集，节流能够控制相关计算和反应速度，提高响应流畅度并降低资源消耗。
表单验证及提示：在用户填写表单的过程中，如果对输入字段进行了实时验证，节流可以避免在用户快速输入时反复验证和提示错误信息，提高用户体验。

三、代码实现

1.web实现

未使用防抖，当用户鼠标在红色区域移动或者疯狂点击按钮时，事件执行函数会触发多次。如果是向后端发起请求，不仅会造成性能问题，还可能会造成不可预期的错误。

使用节流代码如下：

单独封装一个节流函数，传入两个参数，事件执行函数和间隔时间。返回节流后的函数，在其中判断上一次执行函数到现在是否超过间隔时间，如果超过，则通过函数对象的apply方法执行事件的执行函数。这里使用apply方法是为了确保事件执行函数的this指向触发事件的dom元素和函数签名的灵活性（可能传递的参数）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="background: red;width: 500px;height: 500px;" id="box">
    </div>
    <button id="btn">请求</button>
</body>

<script>
    let box = document.querySelector('#box')
    let btn = document.querySelector('#btn')
    const throttle = (fun, delay) => {
        let last = 0
        return function throttled(...params) {
            const now = Date.now()
            if (now - last > delay) {
                fun.apply(this, ...params)
                last = now
            }
        }
    }

    box.addEventListener('mousemove', throttle(function () {
        console.log("鼠标移动，发起请求");
    }, 2000))

    btn.addEventListener('click', throttle(function () {
        console.log("点击按钮，发起请求");
        console.log(this);
    }, 2000))


</script>

</html>

2.安卓实现

不进行节流时，多次点击按钮，事件连续触发多次

在LaunchedEffect 内部创建并存储了一个已经被节流的处理函数throttled，这样每次点击按钮时都会调用同一个节流后的函数实例，从而实现节流效果。

@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { var throttled by remember { mutableStateOf({}) } fun throttle(f: () -> Unit, delay: Int): () -> Unit { var last = 0L return { val now = System.currentTimeMillis() if (now - last > delay) { f() last = now } } } fun handleClick() { Log.d("点击", "发起请求") } // 创建节流函数，并将其赋值给 throttled,确保每次点击引用同一个节流函数实例 LaunchedEffect(Unit) { throttled = throttle({ handleClick() }, 2000) } Column( modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Button(onClick = { throttled() }) { Text(text = name) } } }

3.鸿蒙实现

鸿蒙的实现跟web类似，但是不需要考虑事件执行函数内部this的指向问题，所以不需要使用apply方法。

@Entry @Component struct Message { @State message: string = '点击' private throttle: Function = (fun: Function, delay: number) => { let last: number = 0 return function throttled(...args) { const now: number = Date.now() if (now - last > delay) { fun(...args) last = now } } } build() { Row() { Column() { Button(this.message).onClick(this.throttle(() => { if (hilog.isLoggable(0x0001, "发起请求", hilog.LogLevel.INFO)) { hilog.info(0x0001, "用户", "%{public}s发起请求", this.message) } }, 2000)) } .width('100%') } .height('100%') } }

四、防抖和节流的区别

防抖和节流都是在处理高频触发的事件时，为了避免短时间内多次执行而采取的优化策略。区别在于触发条件和执行时机的不同：

防抖：当一个事件在短时间内连续触发时，防抖确保在最后一次触发后的一段时间内如果没有再次触发该事件，则执行对应的处理函数。

节流：节流是限制事件处理函数在一定时间段内只执行一次，即使事件在这段时间内多次触发。

节流和防抖都在一定程度上限制了函数执行的频率，但节流侧重于稳定输出，始终保持一定的执行间隔，而防抖则关注的是事件触发动作结束后的一次有效执行。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/138374.html

节流（Throttle）