提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

JavaScript 高频函数优化-函数防抖&函数节流

JavaScript 代码
2023-03-15 23:25:47 时间

什么是高频函数？

  • oninput（实时获取输入的数据）
  • onscroll（监听页面的滚动）
  • onresize（监听浏览器可视区域的变化）
  • onmousemove（移动端监听手指在屏幕的滑动）

什么是函数防抖?

  • 用户在设定的时间内进行高频操作则不触发业务逻辑代码，如果没有进行高频操作则触发逻辑代码
  • 实现原理
    • 利用定时器：如果用户在指定的时间不断的高频操作，在操做过程中不断对定时器进行开启和关闭，业务逻辑代码写到到定时器的回调函数中

什么是函数节流？

  • 高频函数不断的触发过程中，业务逻辑代码以设定的时间为间隔进行触发
  • 实现原理
    • 利用某一变量作为定时器开启和关闭的条件，只要定时器没有执行完成，即使高频函数在不断进行触发，也不会重新开启或关闭定时器，业务逻辑代码写在定时器的回调函数中。
    • *
案例展示（函数防抖）
<!--模拟百度搜索输入框效果，在每次输入之后会有不同的搜索信息返回-->
​
<!--html结构-->
<body>
    <input type="text">
</body>
// JavaScript代码
let oInput = document.querySelector("input");
oInput.oninput = function () {
    console.log(this.value);
    console.log("发送请求");
}
​
// 通过这种方式虽然能满足基本功能效果，但是在输入框每次输入的数据改变时，就会发送请求，那么这样容易造成服务器压力
通过函数防抖进行优化
<!--html结构-->
<body>
    <input type="text">
</body>
let oInput = document.querySelector("input");
let timerID = null;
oInput.oninput = function () {
    timerID && clearTimeout(timerID);
    timerID = setTimeout(() => {
        console.log(this.value);
        console.log("发送请求");
    }, 1000);
}
​
/*
代码讲解：
1.在高频函数外部设置timerID定时器标志变量，在首次触发高频函数时，判断timerID定时器是否存在，不存在则开启定时器，定时器1000ms后发送请求。
2.如果在1000ms内再次触发高频函数时，判断timerID定时器是否存在，存在先关闭timerID定时器，在开始timerID定时器，如果循环重复。
3.如果在1000ms内没有触发高频函数，那么则成功“发送请求”
​
通过函数防抖就能解决上述问题，在1秒内不间断输入，那么定时器处于不断的开启关闭状态，时间没超过一秒请求就不会发送
*/
函数防抖的封装过程
/*
初步封装：
只要调用antiShake函数，那么就会返回一个防抖函数
*/
function antiShake() {
    var timerID = null;
    return function () {
        timerID && clearTimeout(timerID);
        timerID = setTimeout(function () {
            console.log("发送请求");
        }, 500);
    }
}
​
// 给antiShake函数添加回调函数形参和时间形参
function antiShake(fn, delay) {
    var timerID = null;
    return function () {
        timerID && clearTimeout(timerID);
        timerID = setTimeout(function () {
            fn();
        }, delay || 500);
    }
}
​
// 改变this指向和传递事件对象
function antiShake(fn, delay) {
    var timerID = null;
    return function () {
        var self = this;
        var args = arguments;
        timerID && clearTimeout(timerID);
        timerID = setTimeout(function () {
            fn.apply(self, args);
        }, delay || 500);
    }
}
防抖函数封装使用
<!--html结构-->
<input type="text">
// antiShake(参数1, 参数2);
// 参数1: 回调函数
// 参数2: 延迟时间，不传递默认为500毫秒
​
let oInput = document.querySelector("input");
oInput.oninput = antiShake(send);
function send(event) {
    console.log("发送请求");
    console.log(this);
    console.log(event);
}
​
function antiShake(fn, delay) {
    var timerID = null;
    return function () {
        var self = this;
        var args = arguments;
        timerID && clearTimeout(timerID);
        timerID = setTimeout(function () {
            fn.apply(self, args);
        }, delay || 500);
    }
}
案例展示（函数节流）
<!--实现效果：使一个div元素的宽高在浏览器窗口大小改变时，永远等于可视区域宽高的一半-->
​
<!--css样式-->
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 300px;
        height: 300px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
​
<!--html-->
<body>
    <div></div>
</body>
// 调用该函数就能使得div元素宽高保持与屏幕可是区域的宽高的一半
function setElement() {
    var pageX = window.innerWidth;
    var pageY = window.innerHeight;
    oDiv.style.width = pageX / 2 +"px";
    oDiv.style.height = pageY / 2 +"px";
}
let oDiv = document.querySelector("div");
setElement();
window.onresize = function () {
    setElement();
    console.log("发生变化了");
}
​
// 此方法虽然能实现，但是在浏览窗口大小发生改变时，setElement方法被高频率的多次触发
通过函数节流进行优化
<!--css样式-->
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 300px;
        height: 300px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
​
<!--html-->？
<body>
    <div></div>
</body>
function setElement() {
    var pageX = window.innerWidth;
    var pageY = window.innerHeight;
    oDiv.style.width = pageX / 2 +"px";
    oDiv.style.height = pageY / 2 +"px";
}
let oDiv = document.querySelector("div");
setElement();
var timerID = null;
var flag = true;
window.onresize = function () {
    if (!flag) {
        return;
    }
    flag = false;
    timerID && clearTimeout(timerID);
    timerID = setTimeout(function () {
        flag = true;
        setElement();
        console.log("我被触发了");
    }, 500);
}
​
/*
代码讲解：
1.在高频函数外部设置timerID定时器标志变量，设置标志符号flag默认取值为true。如果flag为true才执行后面的代码，如果flag为false则不执行后面的代码。
2.当高频函数首次触发时，先让flag取反，再进行timerID判断，如果timerID为null，则开启timerID定时器，定时器在500ms之后被执行，“发送请求”，并flag取反。
3.只要定时没有成功执行完成，flag永远为false，那么定时器就不会不断的重启和关闭，这样就能保证，即使高频函数在不断触发，也能保证业务代码在500ms间断触发
​
代码含义就是只有if条件语句的条件判断为假才会执行定时器的代码,如果为真则永远不会执行定时器代码,那么整段代码的含义就会变成没500毫秒执行一次业务逻辑代码
*/
函数节流的封装过程
// 只要调用throttling函数,那么就会返回一个防抖函数
function throttling() {
    let timerID = null;
    let flag = true;
    return function () {
        if (!flag) {
            return;
        }
        flag = false;
        timerID && clearTimeout(timerID);
        timerID = setTimeout(function () {
             flag = true;
             setElement();
        }, 500);
    }
}
​
// 设置回调函数形参和时间形参
function throttling(fn, delay) {
    let timerID = null;
    let flag = true;
    return function () {
        if (!flag) {
            return;
        }
        flag = false;
        timerID && clearTimeout(timerID);
        timerID = setTimeout(function () {
             flag = true;
             fn();
        }, delay || 500);
    }
}
​
// 改变this指向和传递事件对象
function throttling(fn, delay) {
    let timerID = null;
    let flag = true;
    return function () {
        let self = this;
        let args = arguments;
        if (!flag) {
            return;
        }
        flag = false;
        timerID && clearTimeout(timerID);
        timerID = setTimeout(function () {
             flag = true;
             fn.apply(self, args);
        }, delay || 500);
    }
}
函数节流的封装使用
<!--css样式-->
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 300px;
        height: 300px;
        background: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
​
<!--html-->？
<body>
    <div></div>
</body>
// throttling(参数1, 参数2);
// 参数1: 函数
// 参数2: 延迟时间，不传递默认为1000毫秒
let oDiv = document.querySelector("div");
function setElement() {
    let pageX = window.innerWidth;
    let pageY = window.innerHeight;
    oDiv.style.width = pageX / 2 +"px";
    oDiv.style.height = pageY / 2 +"px";
}
setElement();
window.onresize = throttling(setElement, 400);
function throttling(fn, delay) {
    var timerID = null;
    var flag = true;
    return function () {
        var self = this;
        var args = arguments;
        if (!flag) {
            return;
        }
        flag = false;
        timerID && clearTimeout(timerID);
        timerID = setTimeout(function () {
             flag = true;
             fn.apply(self, args);
        }, delay || 500);
    }
}

相关文章