JS节流函数

vue组件动态绑定属性值 — vue技术交流群（864583465) (此群满可加2群：111822407）

废话不多说直接上代码

export const myDebounce = function (func, delay = 100) {
  return function () {
    let self = this
    let args = arguments
    if(window.lastDoneTime) {
      let now = new Date().getTime()
      clearTimeout(window.timer)
      if(now - window.lastDoneTime >= delay) {
        window.lastDoneTime = now
        func && func.apply(self, args)
      } else {
        window.timer = setTimeout(() => {
          func && func.apply(self, args)
        }, delay)
      }
    } else { // 首次
      window.lastDoneTime = new Date().getTime()
      func && func.apply(self, args)
    }
  }
}

在vue中演示一个鼠标移动的示例

<template>
  <div class="demo" @mousemove="moveTest">
  
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

const myDebounce = function (func, delay = 100) {
  return function () {
    let self = this
    let args = arguments
    if(window.lastDoneTime) {
      let now = new Date().getTime()
      clearTimeout(window.timer)
      if(now - window.lastDoneTime >= delay) {
        window.lastDoneTime = now
        func && func.apply(self, args)
      } else {
        window.timer = setTimeout(() => {
          func && func.apply(self, args)
        }, delay)
      }
    } else { // 首次
      window.lastDoneTime = new Date().getTime()
      func && func.apply(self, args)
    }
  }
}

@Component({})
export default class extends Vue {
  moveTest(e){
    let date = new Date().getTime()
    console.log('触发时间 --- ' + date)
    myDebounce(this.doneIt)(date)
  }

  doneIt(arg){
    console.log(arg + '----- 执行时间')
  }
}
</script>
<style lang="scss">
.demo {
	width: 100%；
	heigh: 100%;
}
</style

结果参考