前端js高级部分 检测变量方法+防抖节流+浏览器事件循环模型

// 检测变量方法
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();
});

这段代码提供了检测变量类型、实现防抖和节流函数的方法，并展示了如何模拟浏览器事件循环处理机制。这些技术在现代前端开发中非常重要，并且是前端面试中常见的高级技能考察点。