节流

  • utils/index.js

    1. export function debounce(func, wait, immediate) {
    2.   let timeout, args, context, timestamp, result
    4.   const later = function () {
    5.       // 据上一次触发时间间隔
    6.       const last = +new Date() - timestamp
    8.       // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    9.       if (last < wait && last > 0) {
    10.           timeout = setTimeout(later, wait - last)
    11.       } else {
    12.           timeout = null
    13.           // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
    14.           if (!immediate) {
    15.               result = func.apply(context, args)
    16.               if (!timeout) context = args = null
    17.           }
    18.       }
    19.   }
    21.   return function (...args) {
    22.       context = this
    23.       timestamp = +new Date()
    24.       const callNow = immediate && !timeout
    25.       // 如果延时不存在，重新设定延时
    26.       if (!timeout) timeout = setTimeout(later, wait)
    27.       if (callNow) {
    28.           result = func.apply(context, args)
    29.           context = args = null
    30.       }
    31.       return result
    32.   }
    33. }

  • 使用 debounce

    1. <template>
    2. <div>
    3. <button  @click.stop="pointListChange(ztBoolean,4)">按钮<button> 
    4. </div>
    5. </template>
    6. <script>
    7. import { debounce }  from '../utils/index'
    8. export default {
    9. methods:{
    10. /* 不要使用箭头函数 否则this会丢失  */
    11.   pointListChange:debounce(function(status, index) {
    12.     this.doPointListChange(status, index)
    13.   }, 500, true),
    14.   doPointListChange(status, index){
    15.     ...doSomething
    16.   }
    17. }  
    18. }
    19. </script>

    另一种实现方法

    1. export function _debounce(fn, delay = 200) {
    2. //防抖
    3.   var timer;
    4.   return function () {
    5.       var th = this;
    6.       var args = arguments;
    8.       if (timer) {
    9.           clearTimeout(timer);
    10.       }
    11.       timer = setTimeout(function () {
    12.           timer = null;
    13.           fn.apply(th, args);
    14.       }, delay);
    15.   };
    16. }

  • 使用 

    1. <template>
    2. <div>
    3. <button  @click.stop="ShowRspDevices()">按钮<button> 
    4. </div>
    5. </template>
    6. <script>
    7. import { _debounce } from '../../utils/debounce'
    8. export default {
    9. methods:{
    10. /* 不要使用箭头函数 否则this会丢失  */
    11.   ShowRspDevices(val){
    12.     this._debounceFun(val);
    13.   },
    14.   /* 不要使用箭头函数 否则this会丢失  */
    15.  _debounceFun: _debounce(function(val){
    16.     this.isShowRspDevices = val;
    17.     this.initRsp();
    18.   },500),
    19. }  
    20. }
    21. </script>