防抖:觸發(fā)高頻事件,n秒后執(zhí)行荷愕,如果n秒內(nèi)再觸發(fā)衡怀,重新計時
function debounce(fn) {
let timeout = null; // 創(chuàng)建一個標記用來存放定時器的返回值
return function () {
clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉
timeout = setTimeout(() => { // 然后又創(chuàng)建一個新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話棍矛,就不會執(zhí)行 fn 函數(shù)
fn.apply(this);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖
ps:this指向特殊幾種情況:
1,函數(shù)作為構(gòu)造函數(shù)抛杨,this指向它實例對象
2够委,函數(shù)作為對象屬性被調(diào)用,this指向?qū)ο蟊旧?/h5>
注意怖现,如果fn函數(shù)不作為obj的一個屬性被調(diào)用慨绳,會是什么結(jié)果呢?
var obj = {
x:10,
y:function(){
console.log(this);
console.log(this.x);
}
}
var fn1 = obj.fn;
fn1(); // undefined
如上代碼真竖,如果fn函數(shù)被賦值到了另一個變量中,并沒有作為obj的一個屬性被調(diào)用厌小,那么this的值就是window恢共,this.x為undefined。
3,函數(shù)用call或者aply調(diào)用璧亚,this指向作為參數(shù)傳入的對象(作用域的改變)
注意怖现,如果fn函數(shù)不作為obj的一個屬性被調(diào)用慨绳,會是什么結(jié)果呢?
var obj = {
x:10,
y:function(){
console.log(this);
console.log(this.x);
}
}
var fn1 = obj.fn;
fn1(); // undefined
如上代碼真竖,如果fn函數(shù)被賦值到了另一個變量中,并沒有作為obj的一個屬性被調(diào)用厌小,那么this的值就是window恢共,this.x為undefined。
call()讨韭、apply()、bind() 都是用來重定義 this 這個對象的癣蟋! call() 返回一個新的函數(shù)透硝;apply()、bind() 直接執(zhí)行疯搅。 call() 濒生、bind() 、 apply() 這三個函數(shù)的第一個參數(shù)都是 this 的指向?qū)ο筢E贰5诙€參數(shù)差別就來了: call()罪治、bind() 是直接放進去的,第二第三第 n 個參數(shù)全都用逗號分隔 apply() 所有參數(shù)必須放在一個數(shù)組里面?zhèn)鬟M去
節(jié)流:觸發(fā)高頻事件礁蔗,n秒內(nèi)只執(zhí)行一次觉义,會稀釋函數(shù)的執(zhí)行頻率
function throttle(fn){
let flag = true;
return function(){//-通過閉包來保存一個標記-
if(!flag) return;
flag = false;
fn.apply(this);
setTimeout(()=>{
flag = true
},500)
}
}