js防抖节流函数

Html

Css

/**
 * 函数防抖
 * @param {Function} fn callback
 * @param {Number} delay 时间
 * @param {*} immediate 立即执行
 * @returns 
 */
var debounce = function(fn, delay, immediate) {
    var timer = null;
    immediate = immediate || false;
    return function() {
        var context = this;
        var args = arguments;
        //清除上一次延时器
        timer && clearTimeout(timer);
        // 是否立即执行
        if (immediate) {
            var callbackNow = !timer;
            timer = setTimeout(() => {
                timer = null;
            }, delay);
            callbackNow && fn.apply(context, args);
        } else {
            timer = setTimeout(() => {
                fn.apply(context, args);
            }, delay);
        }
    }
}
/**
 * 函数节流
 * @param {Function} fn callback
 * @param {Number} delay 时间
 * @returns 
 */
var throttle = function(fn, delay) {
    var lastTime = Date.now();
    return function() {
        var context = this;
        var args = arguments;
        var curTime = Date.now();
        console.log(curTime - lastTime);
        if (curTime - lastTime >= delay) {
            fn.apply(context, args);
            lastTime = curTime;
        }
    }
}

// test
var box = document.getElementById('test');
var changeBoxBgColor = function() {
    var r = parseInt(Math.random() * 255, 10);
    var g = parseInt(Math.random() * 255, 10);
    var b = parseInt(Math.random() * 255, 10);
    box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
}
var changeNumber = function() {
    box.innerText = Math.random();
}
box.onmouseenter = debounce(changeBoxBgColor, 1500, true);
box.onmouseover = throttle(changeNumber, 1500, true);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js防抖节流函数



代码描述：常用的防抖节流函数，其中防抖支持首次立即执行

更新时间：2022-03-12 01:18:53

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

lvjunhao

相关代码

js防抖节流函数

最新