1.淺拷貝 創建一個新對象,這個對象有原始對象屬性值的一份精確拷貝,如果是基本數據類型,拷貝的就是基本類型的值,如果是引用數據類型,拷貝的就是內存地址
2.深拷貝和淺拷貝最大的區別是:拷貝引用數據類型時,拷貝的不是內存地址而是要從堆內存中開辟一個新的區域存放新對象,彼此完全獨立
3.防抖(等用戶高頻事件完了再進行事件操作)
設計思路
function debounce(delay, callback) {
let timer;
// timer 變量需要一直保存在內存當中 閉包
return (value)=> {
clearTimeout(timer); //清除之前觸發的定時器
timer = setTimeout(() => {
callback(value);
}, delay);
};
}
function fn(value) {
console.log('value', value);
}
const debounceFunc = debounce(1000, fn);
const input = document.getElementById('input');
input?.addEventListener('keyup', (e) => {
debounceFunc(e.target?.value);
});
- 應用場景
(1)search搜索聯想,用戶在不斷輸入值時,用防抖來節約請求資源
(2)window觸發resize的時候,不斷的調整瀏覽器窗口大小會不斷的觸發這個事件,用防抖來讓其只觸發一次
4.節流
防抖存在一個問題,事件會一直等到用戶完成操作后一段時間在操作,如果一直操作,會一直不觸發。比如說是一個按鈕,點擊就發送請求,如果一直點,那么請求就會一直發布出去。這里正確的思路應該是第一次點擊就發送,然后上一個請求回來后,才能再發。
節流就是減少流量,將頻繁觸發的事件減少,并每隔一段時間執行。即,控制事件觸發的頻率
總結:某個操作希望上一次的完成后再進行下一次,或者希望隔一段時間觸發一次。
function throttle(func, wait) {
let timeOut;
return () => {
if (!timeOut) {
// 如果timeOut有值就不執行
timeOut = setTimeout(() => {
func();
timeOut = null;
}, wait);
}
};
}
function handle() {
console.log(Math.random());
}
document.getElementById('button')!.onclick = throttle(handle, 2000);
- 應用場景
(1)鼠標不斷點擊觸發,mousedown(單位時間內只觸發一次)
(2)監聽滾動事件,比如是否滑到底部自動加載更多
總結
防抖和節流相同點:
防抖和節流都是為了阻止操作高頻觸發,從而浪費性能。防抖和節流區別:
防抖是觸發高頻事件后n秒內函數只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間。適用于可以多次觸發但觸發只生效最后一次的場景。
節流是高頻事件觸發,但在n秒內只會執行一次,如果n秒內觸發多次函數,只有一次生效,節流會稀釋函數的執行頻率。