面试题：JavaScript 事件节流与防抖在不同浏览器环境下的兼容性及优化策略

可能出现的兼容性问题分析

事件对象差异：不同浏览器对事件对象的属性和方法支持不一致。例如，获取鼠标位置时，event.pageX 和 event.clientX 在某些旧版浏览器可能存在兼容性问题。在触摸事件中，TouchList 对象的属性在不同浏览器也可能有细微差别。
定时器精度差异：setTimeout 和 setInterval 的精度在不同浏览器略有不同。一些浏览器可能存在一定的延迟偏差，这在对时间精度要求较高的节流与防抖场景下可能产生问题。
事件绑定和解绑差异：使用 addEventListener 和 removeEventListener 进行事件绑定和解绑时，不同浏览器对事件类型的大小写、捕获和冒泡阶段的处理可能存在差异。例如，在某些旧版浏览器中，DOMContentLoaded 事件的绑定可能有特殊要求。

优化策略

事件对象标准化：通过封装函数来获取标准的事件属性。例如，对于获取鼠标位置，可以使用如下函数：

function getEventPosition(event) {
    return {
        x: event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)),
        y: event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop))
    };
}

定时器优化：为了提高定时器精度，可以采用 requestAnimationFrame 来替代 setTimeout 和 setInterval 在动画相关的节流防抖场景。对于普通场景，可以通过多次测试取平均值来校准定时器的延迟时间。
事件绑定和解绑标准化：编写通用的事件绑定和解绑函数，处理不同浏览器的差异。例如：

function addEvent(target, type, handler, useCapture = false) {
    if (target.addEventListener) {
        target.addEventListener(type, handler, useCapture);
    } else if (target.attachEvent) {
        target.attachEvent('on' + type, handler);
    } else {
        target['on' + type] = handler;
    }
}

function removeEvent(target, type, handler, useCapture = false) {
    if (target.removeEventListener) {
        target.removeEventListener(type, handler, useCapture);
    } else if (target.detachEvent) {
        target.detachEvent('on' + type, handler);
    } else {
        target['on' + type] = null;
    }
}

通用的事件节流与防抖库代码

// 防抖函数
function debounce(func, wait, immediate = false) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate &&!timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

// 节流函数
function throttle(func, wait) {
    let lastTime = 0;
    return function() {
        const context = this;
        const args = arguments;
        const now = new Date().getTime();
        if (now - lastTime >= wait) {
            func.apply(context, args);
            lastTime = now;
        }
    };
}

// 示例使用
const debouncedFunction = debounce(() => {
    console.log('Debounced function called');
}, 300);

const throttledFunction = throttle(() => {
    console.log('Throttled function called');
}, 300);

// 绑定事件示例
const targetElement = document.getElementById('target');
addEvent(targetElement, 'click', debouncedFunction);
addEvent(targetElement,'mousemove', throttledFunction);

// 处理 touch 事件示例
addEvent(targetElement, 'touchstart', debouncedFunction);
addEvent(targetElement, 'touchmove', throttledFunction);

星途面试题库

面试题：JavaScript 事件节流与防抖在不同浏览器环境下的兼容性及优化策略

知识考点

面试题答案

可能出现的兼容性问题分析

优化策略

通用的事件节流与防抖库代码