2021-9-29 前端達人
目錄
函數(shù)防抖：在頻繁觸發(fā)某一個事件時，一段時間內不再觸發(fā)該事件后才會去調用對應的回調函數(shù)，在設定間隔時間內如果下一次事件被觸發(fā)， 那么就重新開始定時器，直到事件觸發(fā)結束。
規(guī)定時間內沒有繼續(xù)觸發(fā)事件的前提下，再去調用事件處理函數(shù)；
具體如下面的例子所示：
-
/*定義防抖函數(shù)
-
* func：傳入一個函數(shù)，事件不再持續(xù)觸發(fā)時會調用該函數(shù)
-
* delay:定義持續(xù)多久后執(zhí)行傳入的回調函數(shù)
-
* */
-
function debounce(func,delay) {
-
let timer = null // 用于保存定時器
-
return function (...args) {
-
// 如果定時器存在，清除定時器，隨后重新設置timer
-
if(timer !== null) clearTimeout(timer)
-
timer = setTimeout(func, delay) // 超過delay為接收到事件會調用這里的func 必要的額時候可以修改func的this指向 由于timer對外部存在引用，因此不會被銷毀
-
}
-
}
-
-
/*事件處理函數(shù)*/
-
function testDeBounce(){
-
console.log('你看我執(zhí)行了幾次？？')
-
}
-
-
// 接收debounce返回的函數(shù)
-
const temp = debounce(testDeBounce(),1000)
-
-
/*綁定事件，測試防抖函數(shù)*/
-
window.addEventListener('scroll',()=>{
-
temp()
-
}); // 這樣寫最少調用一次事件處理函數(shù)，最多也不會多余下面的寫法執(zhí)行的次數(shù)
-
window.addEventListener('scroll', testDeBounce); // 如果這樣寫的話，每當頁面滾動就會調用事件處理函數(shù)
總結一下思路：
1.定義一個節(jié)流函數(shù)
2.函數(shù)內部使用一個變量保存定時器
3.返回一個函數(shù)，函數(shù)內部定義：如果定時器已經(jīng)存在就清除定時器，重新設置定時器
4.定義一個變量來接收debounce返回的函數(shù)
5.在事件的回調函數(shù)中直接調用上一步的變量接收的方法
函數(shù)節(jié)流：在事件持續(xù)觸發(fā)的前提下，保證一定時間段內只調用一次事件處理函數(shù)，就是函數(shù)節(jié)流；
函數(shù)節(jié)流實現(xiàn)的方式：定時器、時間戳、定時器+時間戳；
思路：
1.定義節(jié)流函數(shù)throttle
2.定義timer保存定時器
3.返回一個函數(shù)。函數(shù)內部定義：如果定時器不存在，設置定時器，間隔某一時間后將timer設置為null，如果在這之前事件再次觸發(fā)，則定時器中的回調無效
<button>這是一個孤獨的按鈕</button>
-
/*
-
* 定義定時器節(jié)流函數(shù)
-
* func:傳入事件處理函數(shù)
-
* delay：在delay指定的時間內定時器回調無效
-
* */
-
function throttle(func,delay) {
-
let timer = null
-
const context = this
-
return function(...args){
-
// 如果定時器不存在
-
if(!timer){
-
timer = setTimeout(()=>{
-
func.apply(context,args) // 考慮返回的函數(shù)調用的環(huán)境，因此這里不直接使用this
-
timer = null // delay之后清除定時器
-
},delay)
-
}
-
}
-
}
-
-
function test() {
-
console.log('啊啊啊！')
-
}
-
-
const temp = throttle(test,1000)
-
-
document.querySelector('button').addEventListener('click',()=>{
-
temp()
-
})
-
var throttle = function(func, delay) {
-
var prev = Date.now();
-
return function() {
-
var context = this;
-
var args = arguments;
-
var now = Date.now();
-
if (now - prev >= delay) {
-
func.apply(context, args);
-
prev = Date.now();
-
}
-
}
-
}
-
-
function handle() {
-
console.log(Math.random());
-
}
-
-
window.addEventListener('scroll', throttle(handle, 1000));
-
// 節(jié)流throttle代碼（時間戳+定時器）：
-
var throttle = function(func, delay) {
-
var timer = null;
-
var startTime = Date.now();
-
return function() {
-
var curTime = Date.now();
-
var remaining = delay - (curTime - startTime);
-
var context = this;
-
var args = arguments;
-
clearTimeout(timer);
-
if (remaining <= 0) {
-
func.apply(context, args);
-
startTime = Date.now();
-
} else {
-
timer = setTimeout(func, remaining);
-
}
-
}
-
}
-
-
function handle() {
-
console.log(Math.random());
-
}
-
-
window.addEventListener('scroll', throttle(handle, 1000));
想跟博主交朋友的可以查找，公_號?：前端老實人，跟博主一起探討學習哦?
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
藍藍設計的小編 http://www.skdbbs.com