javascript中的节流控制案例

发表于 | 分类于
字数统计: 477 字 | 阅读时长 ≈ 2 分钟

节流控制频繁触发事件或频繁发送请求，避免页面卡顿，请求卡顿，简单来说就是在多次触发时有一个间隔时间，第n次触发事件和第n+1次触发事件之间必须保证间隔时间。

一个带提示的搜索案例（用vue写的）

场景(如下图)

需要达到的效果

  • 搜索输入内容时利用节流函数控制在一个指定的周期内才发送请求

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 搜索框
<template>
	<div>
        <input class="box" ref="querySearch" v-model="query" :placeholder="请输入">
        <div>提示层 请求返回的数据渲染的 这里我就不具体谢了</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                query: ''
            }
        },
        watch: {
            query(newVal) {
                // 发送请求
                //this.search(newVal)
                
                // 改为利用节流函数控制
                this.throttle(this.search(newVal), 200)
                // 执行逻辑 当query改变时200ms后发送请求，当200ms内多次触发节流函数，会取消上一次200ms后执行func()的函数，继续新的一次200ms后执行
                // 也就是每一次query发生改变都要等到200ms以后发送请求
            }
        }，
        methods: {
        	//节流函数 第一个参数是要执行的函数 第二个是要延迟的时间
        	throttle(func, delay) {
        		let timer
        		return function(...args){
        			// 被执行了 取消执行
        			// 在delay时间内反复执行return的匿名函数会清除上一次继续延迟delay时间后执行func 达到节流的效果
        			if(timer) {
       				 clearTimeout(timer)
    				}
    				timer = setTimerout(() => {
        				func.apply(this, args)
    				}, delay)
    			}
    		}	 
    	}
    }
</script>
  • 减少请求
  • 一定程度上优化了性能
  • 节约流量

常见的应用场景

  • Dom元素的拖拽
  • 射击游戏 （单位时间内只发射一颗子弹）
  • 鼠标移动距离
  • 搜索联想（也就是这个案例）
  • 监听滚动事件
------ 本文结束------
0%