节流和防抖函数

最新推荐文章于 2023-06-25 19:36:38 发布

weixin_30920091

最新推荐文章于 2023-06-25 19:36:38 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jerrypig/p/10187368.html

本文详细介绍了JavaScript中节流(throttle)和防抖(debound)函数的实现原理及应用。节流函数用于限制函数调用频率，防抖函数则确保函数在一系列触发后仅执行一次，两者都是优化用户体验和提升性能的重要手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


/**
 * 节流函数
 * @param {Funtion} method 回调函数
 * @param {Object} context 上下文地址
 * @param {number} delay 延迟时间ms
 */
function throttle(method, context, delay) {
    delay = delay || 500;
    var currentDate = new Date();
    method.startTime = method.startTime || 0;
    if (currentDate - method.startTime > delay) {
        method.call(context);
        method.startTime = new Date();
    }
    else {
        clearTimeout(method.timer);
        method.timer = setTimeout(function () {
            throttle(method, context, delay);
        }, 50);
    }
}


/**
 * 防抖函数
 * @param {Funtion} method 回调函数
 * @param {Object} context 上下文地址
 * @param {number} delay 延迟时间ms
 */
function debound(method, context, delay) {
    delay = delay || 200;
    clearTimeout(context.deboundId);
    context.deboundId = setTimeout(function () {
        method.call(context);
    }, delay);
}

转载于:https://www.cnblogs.com/jerrypig/p/10187368.html