【javascript基础——系列9】函数防抖与节流

系列文章

【javascript基础——系列1】前端页面ajax连接后台服务器传输数据

【javascript基础——系列2】前端页面axios连接后台服务器传输数据

【javascript基础——系列3】js中的事件的事件冒泡、事件捕获

【javascript基础——系列4】关于js的数据类型以及判别方法

【javascript基础——系列5】js的defer和async；parsesint；图片压缩

【javascript基础——系列6】常见的5种JS设计模式；发布订阅者模式

【javascript基础——系列7】变量提升函数提升；内存泄漏

【javascript基础——系列8】函数传参传递值还是引用；函数式编程

【javascript基础——系列9】函数防抖与节流

【javascript基础——系列10】js中隐藏元素的几种方法以及代码

【javascript基础——系列11】跨域存在的原因以及解决办法

---

---

一、函数防抖

持续拖动滚动条，只要不停止触发，就永远不会有输出，短时间内触发的事件，在某个时间期限内，我的函数只执行一次

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

function debounce(fn,delay) {
    var timeout = null; // 创建一个标记用来存放定时器的返回值
    return function (e) {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}
// 处理函数
function handle() {
    console.log('防抖：', Math.random());
}
        
//滚动事件
window.addEventListener('scroll', debounce(handle,500));

---

二、函数节流

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

持续拖动滚动条，每间隔一段时间，就会输出反馈 ，相当于技能冷却，执行之后，函数会失效一段时间，冷却之后，又会恢复，设置一个状态位，判断是否处于工作状态

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));

---

三、函数节流与函数防抖区别

• 函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，在规定时间后触发函数，但是在规定时间内再次触发的话，就会取消之前的计时器而重新设置，这样一来就只有最后一次操作能被实现。
• 函数节流：使得一定时间只能触发一次函数，原理是通过判断是否有延迟调用函数未执行。

区别：

函数节流不管时间触发的有多么频繁，都会保证在一定的时间内一定会执行一次真正的事件处理函数，而防抖只会在最后一次事件后才触发一次函数。比如在页面无限加载的情况下，我们需要用户在滚动页面时，每隔一段时间发送一次Ajax请求，而不是在用户滚动页面操作时才去请求数据，这样就比较适合用节流技术。

---

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~