基于wue使用

throttle.js文件

节流

/**
 * 节流
 * @param {function} fn         触发的函数
 * @param {number} interval     间隔时间
 */
export function throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}

vue文件

<template>
  <input type="text" placeholder="搜索医生" class="search-input" 
     @input="doctorSearch($event)"  @keyup.enter="doctorSearch($event)"
 />
</template>
<script>
import { throttle } from "@/utils/throttle";
methods: {
    doctorSearch: throttle(e => {
      let searchVal = e.target.value;
      self.searchVal = searchVal;
      // 全部都重置到第一页
      self.departmentData.map(item => {
        item.page = 1;
      });
      self.onLoad('reload', self.labelActive);
    }, 800),
 }
 </script>

使用方法同上

防抖

/**
 * 防抖
 * @param {function} func       触发的函数
 * @param {number} wait         间隔时间
 * @param {boolean} immediate   是否立即执行
 */
export function debounce(func, wait = 500, immediate = true) {
    let timeout, args, context, timestamp, result

    const later = function () {
        // 据上一次触发时间间隔
        const last = +new Date() - timestamp

        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
        if (last < wait && last > 0) {
            timeout = setTimeout(later, wait - last)
        } else {
            timeout = null
            // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
            if (!immediate) {
                result = func.apply(context, args)
                if (!timeout) context = args = null
            }
        }
    }

    return function (...args) {
        context = this
        timestamp = +new Date()
        const callNow = immediate && !timeout
        // 如果延时不存在，重新设定延时
        if (!timeout) timeout = setTimeout(later, wait)
        if (callNow) {
            result = func.apply(context, args)
            context = args = null
        }

        return result
    } 
}