// 检测变量方法
function isType(target, type) {
return Object.prototype.toString.call(target).slice(8, -1) === type;
}
// 防抖方法
function debounce(fn, wait) {
let timeout = null;
return function() {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) fn.apply(context, args);
};
}
// 节流方法
function throttle(fn, wait) {
let previous = 0;
return function() {
let context = this;
let args = arguments;
let now = new Date();
if (now - previous > wait) {
fn.apply(context, args);
previous = now;
}
};
}
// 浏览器事件循环模型示例
// 假设我们有一个自定义的事件循环机制
let eventQueue = [];
let customEventLoop = () => {
let event;
while (event = eventQueue.shift()) { // 模拟事件队列不为空且有事件需处理
console.log('Event triggered:', event); // 处理事件
}
};
// 使用示例
// 检测变量类型
console.log(isType([], 'Array')); // true
console.log(isType({}, 'Object')); // true
// 防抖函数的使用
let myFunc = function() {
console.log('Function called!');
};
let myFuncDebounced = debounce(myFunc, 2000);
window.addEventListener('scroll', myFuncDebounced);
// 节流函数的使用
let myThrottledFunc = throttle(myFunc, 2000);
window.addEventListener('resize', myThrottledFunc);
// 模拟浏览器事件循环
window.addEventListener('click', () => {
eventQueue.push('click');
customEventLoop();
});这段代码提供了检测变量类型、实现防抖和节流函数的方法，并展示了如何模拟浏览器事件循环处理机制。这些技术在现代前端开发中非常重要，并且是前端面试中常见的高级技能考察点。