業(yè)務(wù)場(chǎng)景：打開(kāi)一個(gè)iframe頁(yè)面，并主動(dòng)觸發(fā)iframe頁(yè)面的某個(gè)元素 的事件铡恕。
存在問(wèn)題：DOM元素要進(jìn)行渲染琢感，代碼執(zhí)行到觸發(fā)元素事件時(shí)，元素并未渲染出來(lái)探熔。
解決辦法：寫(xiě)一個(gè)工具函數(shù)驹针，限制時(shí)間(limitTime)內(nèi)，有頻率(frequencyTime)的做某個(gè)事情(fn)诀艰，超過(guò)限制時(shí)間(limitTime)柬甥，不做則個(gè)事情fn。如果在某個(gè)頻率(frequencyTime)這個(gè)事情觸發(fā)了其垄，并且返回為true苛蒲。那么就停止做這個(gè)事情(fn)。
/**
*
* @param {*} limitTime 限制時(shí)間
* @param {*} frequencyTime 頻率時(shí)間
* @param {*} fn 某個(gè)事情
* 寫(xiě)一個(gè)工具函數(shù)绿满，限制時(shí)間(limitTime)內(nèi)臂外，有頻率(frequencyTime)的做某個(gè)事情(fn)，
* 超過(guò)限制時(shí)間(limitTime)喇颁，不做則個(gè)事情fn漏健。
* 如果在某個(gè)頻率(frequencyTime)這個(gè)事情觸發(fā)了，并且返回為true橘霎。那么就停止做這個(gè)事情(fn)
*/
export function limtToolFn(limitTime, frequencyTime, fn) {
let freTimer = null
const beginTime = new Date().getTime()
freTimer = setInterval(() => {
if (new Date().getTime() - beginTime > limitTime) {
clearInterval(freTimer)
} else {
let res = fn()
if (res) {
clearInterval(freTimer)
}
}
}, frequencyTime)
}
節(jié)流
/**
* 節(jié)流1
* 首次觸發(fā)：事件結(jié)束蔫浆，重新觸發(fā)事件，也會(huì)觸發(fā)姐叁，不需要刷新頁(yè)面
* 觸發(fā)最后的事件情況如下(比如delay的時(shí)間為5s瓦盛，我們持續(xù)觸發(fā)事件為7.5s，
* 我們會(huì)觸發(fā)三次(0s 5s 10s) 10s時(shí)觸發(fā)的事件是7.5s時(shí)的事件)
* @param {*} fn ：回調(diào)函數(shù)
* @param {*} delay ：節(jié)流時(shí)間
* @returns
*/
const throttle = (fn, delay) => {
let last = 0;
let timer = null;
return function () {
let context = this
let arg = arguments
let now = Date.now();
let reming = delay - (now - last);
clearTimeout(timer);
if (reming < 0) { // 第一次 間歇性 執(zhí)行
fn.call(context, arg);
last = now;
} else { // 最后一次執(zhí)行
timer = setTimeout(() => {
fn.call(context, arg);
}, reming);
}
}
}
/**
* 節(jié)流2
* 真首次觸發(fā): 頁(yè)面不刷新外潜，真只有一次觸發(fā)谭溉。
* 觸發(fā)最后的事件情況如下(比如delay的時(shí)間為5s，我們持續(xù)觸發(fā)事件為7.5s橡卤，
* 我們會(huì)觸發(fā)三次(0s 5s 10s) 10s時(shí)觸發(fā)的事件是5s之后的第一次事件)
* @param {*} fn
* @param {*} delay
* @returns
*/
export const throttle2 = (fn, delay) => {
let time = -1
// 第一次立即執(zhí)行
let isFirst = true
return function () {
let context = this
let arg = arguments
if (isFirst) {
isFirst = false
fn.call(context, arg)
return
}
if (time === -1) {
time = setTimeout(() => {
fn.call(context, arg)
time = -1
}, delay)
}
}
}
