79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
|
// 使用方法debounced,throttle
|
|||
|
|
// leeBtnClick: throttle(function () {
|
|||
|
|
// console.log(this)
|
|||
|
|
// console.log("执行需要触发事件得函数方法")
|
|||
|
|
// }, 3000),
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 防抖函数
|
|||
|
|
* 1、N秒内的多次触发仅执行最后一次
|
|||
|
|
* 2、在不断的触发事件时以最后一次触发为*标准*准进行调用执行
|
|||
|
|
* 3、判断连续触发事件的标准为(N秒内触发则重新计算时间直至取最后一次)
|
|||
|
|
* @param fn 需要防抖处理的回调函数
|
|||
|
|
* @param delay 防抖处理的延迟标准时间
|
|||
|
|
* @param immediate 是否默认 立即执行(去除延迟时间影响)
|
|||
|
|
*/
|
|||
|
|
function debounced(fn, delay = 1000, immediate = false) {
|
|||
|
|
let timer = null
|
|||
|
|
return function () {
|
|||
|
|
if (immediate) {
|
|||
|
|
console.log("立即执行参数 执行一次方法")
|
|||
|
|
fn.apply(this, arguments)
|
|||
|
|
immediate = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (timer) {
|
|||
|
|
console.log("当前正在重复点击，准备重置时间，重新计算后等待N秒触发最后一次事件执行")
|
|||
|
|
clearTimeout(timer)
|
|||
|
|
}
|
|||
|
|
timer = setTimeout(() => {
|
|||
|
|
console.log("进入类启用定时器防抖执行了一次方法咯！！！")
|
|||
|
|
clearTimeout(timer)
|
|||
|
|
fn.apply(this, arguments)
|
|||
|
|
}, delay)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 节流函数
|
|||
|
|
* N秒内仅执行第一次
|
|||
|
|
* @param fn 需要节流处理的回调函数
|
|||
|
|
* @param delay 节流处理的延迟标准时间
|
|||
|
|
* @param immediate 是否默认 立即执行(去除延迟时间影响)
|
|||
|
|
*/
|
|||
|
|
function throttle(fn, delay = 1000, immediate = false) {
|
|||
|
|
console.log("进入节流对象")
|
|||
|
|
let timer
|
|||
|
|
let status = false // 是否为重复点击状态
|
|||
|
|
return function () {
|
|||
|
|
let _this = this
|
|||
|
|
let args = arguments
|
|||
|
|
|
|||
|
|
if (immediate) {
|
|||
|
|
console.log("立即执行参数 执行一次方法")
|
|||
|
|
fn.apply(_this, args)
|
|||
|
|
immediate = false
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (status) {
|
|||
|
|
console.log("当前点击状态为正在重复点击，请稍等片刻后在点击执行")
|
|||
|
|
uni.showToast({
|
|||
|
|
title:'稍后在试。',
|
|||
|
|
icon:'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
console.log("执行节流：当前执行了一次点击方法")
|
|||
|
|
fn.apply(_this, args)
|
|||
|
|
status = true // 修改状态
|
|||
|
|
timer = setTimeout(() => {
|
|||
|
|
console.log("规定时间到,重置状态，可以重新调用")
|
|||
|
|
status = false
|
|||
|
|
}, delay)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export {
|
|||
|
|
debounced,
|
|||
|
|
throttle
|
|||
|
|
}
|