封裝防抖工具型方法
/**
* @description: 防抖函數的封裝
* @param {Function} callback : 要執行的代碼
* @param {String} time : 要倒計時的時間(停止後多久執行邏輯代碼)
* @return: 返回防抖函數
*/
function fandou (callback, time) {
let timer = null // 聲明一個將要存放定時器的變量
return function () {
// 返回一個函數
clearTimeout(timer) // 清空定時器
timer = setTimeout(() => {
// 給變量賦予倒計時邏輯
callback() // 調用傳進來的回調函數
}, time) // 等待執行邏輯代碼的時間爲傳入的 time 參數
}
}
封裝節流工具型方法 1
/**
* @description: 節流函數的封裝
* @param {Function} callback : 要執行的代碼
* @param {String} time : 要倒計時的時間(停止後多久執行邏輯代碼)
* @return: 返回節流函數
*/
function jieliu (callback, time) {
let timer = null // 聲明一個將要存放定時器的變量
let beginTime = Data.now() // 獲取開始時的時間戳
return function () {
// 返回一個工具方法
clearTimeout(timer) // 清除定時器
let space = Data.now() - beginTime // 獲取( 當前時間戳(觸發事件時) - 開始時間戳 )
if(space >= time){
// 判斷是否 大於等於指定時間
callback() // 執行傳入的邏輯代碼
beginTime = Data.now() // 跟新開始時間
} else {
// 觸發事件間隔小於 傳入的時間
timer = setTimeout(() => {
// 設置定時器 進入倒計時
callback() // 執行傳入的邏輯代碼
}, tiem) // 等待時間爲 傳入的 time
}
}
}
封裝節流工具型方法 2
/**
* @description: 節流函數的封裝
* @param {Function} callback : 要執行的代碼
* @param {String} time : 要倒計時的時間(停止後多久執行邏輯代碼)
* @return: 返回節流函數
*/
function jieliu (callback, time) {
let isPlay = false // 聲明一個 開關 (關閉的開關 -> 可以理解成要打遊戲 現在false是還沒有進入對局 此時可以開始新的遊戲對局)
return function () {
// 返回節流方法
if(!isPlay) {
// 判斷開關狀態
isPlay = true // 改變開關狀態 (true -> 此時已經開始遊戲對局 就不能在開始新的遊戲對局)
setTimeout(() => {
// 定時器邏輯
callback() // 執行 傳入的邏輯代碼
idPlay = false // 執行完畢 關閉開關 (對局結束 可以開啓下一把)
}, time) // 觸發事件之後多久執行邏輯代碼
}
}
}
