前端优化 ----防抖节流-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端优化 ----防抖节流。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

防抖

如果一个事件在短时间内连续触发，则只去执行最后一次。控制频率

实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

 /** 
* @desc 函数防抖 
* @param func 回调函数 
* @param delay 延迟执行毫秒数 
*/ 
function _debounce(func, delay) { 
    let timer;  // 定时器

    return function () { 
        let context = this;  // 记录 this 值,防止在回调函数中丢失
        let args = arguments;  // 函数参数
        
        // 标识是否立即执行
        let isImmediately = !timer;

        //如果定时器存在，则清除定时器(如果没有,也没必要进行处理)
        timer ? clearTimeout(timer) : null; 

        timer = setTimeout(() => { 
            timer = null;
        }, delay);
        
        // isImmediately 为 true 则 执行函数(即首次触发事件)
        isImmediately ? func.apply(context, args) : null;
    } 
}

节流

使一个函数在固定时间内只执行一次。控制次数文章来源地址https://www.toymoban.com/news/detail-757375.html

实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return

//节流throttle代码：
function throttle(fn,delay) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
         // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, delay);
    };
}
 
function sayHi(e) {
    console.log('节流：', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi,500));

到了这里，关于前端优化 ----防抖节流的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！