描述

截流装饰器

1.示例

请打开控制台查看打印日志

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

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<template>
  <div>
    <el-divider>请打开控制台查看打印日志</el-divider>
    <div
      style="height: 400px; margin-top: 14px;overflow-x: hidden; overflow-y: auto; width: 100%;border: 1px solid #ccc"
      ref="wrap"
    >
      <div
        v-for="item in 80"
        :key="item"
        style="width: 100%; height: 50px; background: #eee; margin: 12px 10px; display: flex; align-items: center; justify-content: center"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import { throttleDtor } from 'sf-utils2'
export default {
  mounted() {
    this.$refs.wrap.addEventListener('scroll', this.onScroll, false)
  },
  methods: {
    @throttleDtor(20)
    onScroll(e) {
      console.log(e)
    }
  },

  beforeDestroy() {
    this.$refs.wrap.removeEventListener('scroll', this.onScroll, false)
  }
}
</script>

显示代码 复制代码 复制代码

2.入参说明

参数	说明	类型	是否必填	默认值
wait	截流时间	Number		20

3.源码

import throttle from '@/function/throttle'

/**
 * 函数防抖装饰器
 * @param {number} wait 需要延迟的毫秒数。
 * @param {Object} options 参数{leading: 是否在之前执行, trailing: 是否在之后执行} 默认在定时器之前执行 leading = true
 */
function throttleDtor(wait = 20, options) {
  return function (target, name, descriptor) {
    descriptor.value = throttle(descriptor.value, wait, options)
  }
}

export default throttleDtor