基于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
}
}