【JavaScript】防抖、节流和函数柯理化

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

💻 【JavaScript】防抖、节流和函数柯理化 🏠专栏JavaScript
👀个人主页繁星学编程🍁
🧑个人简介一个不断提高自我的平凡人🚀
🔊分享方向目前主攻前端其他知识也会阶段性分享🍀
👊格言☀️没有走不通的路只有不敢走的人☀️
👉让我们一起进步一起成为更好的自己🎁

文章目录

【JavaScript】防抖、节流和函数柯理化

一. 函数柯理化

(1) 概念

作用把一次传递两个参数变成两次每次传递一个参数

目的利用闭包把第一次传递的参数保存下来延长变量的生命周期

function add(num1) {
    return function (num2) {
        return num1 + num2;
    }
}
console.log(add(1));
/*
        ƒ (num2) {
                return num1 + num2;
            }
        */
console.log(add(1)(2)); // 3

(2) 案例正则验证密码

方式一判断正则写在函数内部需要判断的值在函数外部测试

function testpw(str) {
    const reg = /^\w{6,12}$/;
    return reg.test(str);
}
const res1 = testpw("12345jfiang");
const res2 = testpw("jfiang");
console.log(res1, res2); // true true

方式二正则和测试的值都在函数外部同时传入

function testpw(reg, str) {
    return reg.test(str);
}
const res1 = testpw(/^\w{6,12}$/, "1234");
const res2 = testpw(/^\w{6,12}$/, "1234fajin");
console.log(res1, res2); // false true

方式三利用柯理化闭包封装

function testpw(reg) {
    return function (str) {
        return reg.test(str);
    }
}
const test1 = testpw(/^\w{6,12}$/);
const res1 = test1("1223");
console.log(res1); // false
// 生成一个验证手机号的函数
const testPhone = testpw(/^1\d{10}$/);
// 校验手机号
const res2 = testPhone('2341200');
const res3 = testPhone('12312345678');
console.log(res2, res3); // false true

(3) 函数柯理化的封装

函数柯理化封装

  1. 是多个参数互相利用

  2. 需要两个功能

    功能函数

    收集参数

功能实现拼接地址栏

http://localhost:8080/a/b
	a : http 
	b : localhost
	c : 8080
	d : /a/b
功能函数 把 a b c d 拼接起来

// 并且要实现以下三种情况
// 情况1
const res = curry(fn, 'http')
const res1 = res('localhost')
const res2 = res1('8080')
const res3 = res2('/a/b') // http://localhost:8080/a/b
console.log(res3);
// 情况2
// const res = curry(fn, 'http', 'localhost')
// const res1 = res('8080', '/a/b') // // http://localhost:8080/a/b
// 情况3
// const res = curry(fn, 'http', 'localhost', '8080', '/a/b')() // // http://localhost:8080/a/b
// console.log(res);

实现

function fn(a, b, c, d) {
    return a + '://' + b + ':' + c + d;
}
// 柯理化函数
function curry(fn, ...arg) {
    /*
    收集参数判断参数的个数够不够功能函数使用
    	如果够了执行功能函数
    	如果不够继续收集
    */
    // 对外部收集的参数进行处理
    let _arg = arg || []
    // 需要用_arg的length和 功能函数的参数个数进行比对

    // 获取函数形参的个数
    let len = fn.length
    return function (...arg) {
        _arg = [..._arg, ...arg]
        // 用处理好的参数进行数量判断
        if (_arg.length === len) {
            // 处理好的参数  ==== 功能函数参数相同
            return fn(..._arg)
        } else {
            // 处理好的参数<功能函数参数
            return curry(fn, ..._arg)
        }
    }
}
// const res = curry(fn)

二. 函数防抖

通过setTimeout的方式在一定的时间间隔内将多次触发变成一次触发。通俗的说是在最后一次点击间隔规定时间之后才能再次成功触发否则触发不成功

<input type="text" id="ipt">
<!--  分割线 -->
ipt.oninput = function (e) {
    console.log(e.target.value);
}
// 每键入一次就会将input框中的value值输出

防抖的实现思路

  1. 在防抖函数返回的函数的上级作用域设置一个定时器变量t置为null;
  2. 通过t来判断是否是第一次执行。
  3. 如果不是第一次执行清空定时器
  4. 如果是第一次执行则通过进行代码执行.
  5. 最后设置定时器规定时间之后将t设置为null,使得间隔时间之后t为null间隔时间之后的点击变为第一次点击。

递进优化实现步骤

  • 第一步简单实现

    let t = null;
ipt.oninput = function () {
    clearInterval(t);
    t = setTimeout(() => {
        console.log(this.value);
    }, 1500);
}
// 一直键入值等待1.5s后输出最终值

  • 第二步为了不污染全局把变量放在函数里面

    ipt.oninput = (function () {
    let t = null;
    return function () {
        clearInterval(t);
        t = setTimeout(() => {
            console.log(this.value);
        }, 1500);
    }
})()

  • 第三步封装防抖函数

    function prevent(cb) {
    let t = null;
    return function () {
        clearInterval(t);
        t = setTimeout(() => {
            cb.call(this);
        }, 1500);
    }
}
ipt.oninput = prevent(function () {
    console.log(this.value);
})

三. 函数节流

节流指的是减少一段时间内的触发频率。只有在上一次成功触发间隔规定时间之后才能再次触发。

<input type="text" id="ipt">
<!--  分割线 -->
ipt.oninput = function (e) {
    console.log(e.target.value);
}
// 每键入一次就会将input框中的value值输出

节流的实现思路

  1. 在返回函数的上级作用域定义一个初始标记flag = false;
  2. 通过判断flag 是否=== true来确定是否已经触发
  3. 如果已经触发(flag === true)则中断函数
  4. 如果没有触发(flag === false)则让flag = false执行代码执行后将flag = true

递进优化实现步骤

  • 第一步简单实现

    let flag = false;
ipt.oninput = function () {
    if (flag) return
    flag = true;
    setTimeout(() => {
        console.log(this.value);
        flag = false;
    }, 2500);
}

  • 第二步使用闭包

    ipt.oninput = (function () {
    let flag = false;
    return function () {
        if (flag) return
        flag = true;
        setTimeout(() => {
            console.log(this.value);
            flag = false;
        }, 2500)
    }
})()

  • 第三步封装

    function out(cb = () => { }) {
    let flag = false;
    return function () {
        if (flag) return
        flag = true;
        setTimeout(() => {
            cb.call(this);
            flag = false;
        }, 2500);
    }
}
ipt.oninput = out(function () {
    console.log(this.value);
})

四. 节流与防抖的区别是什么

  1. 防抖只在最后一次成功点击之后间隔规定时间之后才能再次成功触发如果在时间间隔之内就被点击需要重新间隔时间间隔才能点击。
  2. 节流则不同节流只要在上一次成功触发规定时间之后点击就能再次触发中间的触发不会产生影响。

结束语

希望对您有一点点帮助如有错误欢迎小伙伴指正。
👍点赞您的赞赏是我前进的动力
⭐收藏您的支持我是创作的源泉
✍评论您的建议是我改进的良药
一起加油💪💪💪

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: JavaScriptJava
返回列表

上一篇：[已解决]Ubuntu Server 使用 jenkins 运行 selenium webdriver 失败

下一篇：HashMap的原理简述

“【JavaScript】防抖、节流和函数柯理化” 的相关文章

【哈希表】leetcode15. 三数之和(C/C++/Java/Python/Js)--梦破碎的地方1年前 (2023-02-02)
JavaWeb开发中在服务器常用命令集锦1年前 (2023-02-02)
洛谷oj题单【入门1】顺序结构-入门难度（Java）1年前 (2023-02-02)
Java寒假作业——问答题1年前 (2023-02-02)
【javascript】有计算功能的简易计算器1年前 (2023-02-02)
java基础教程：IO流1年前 (2023-02-02)
LeetCode：1219.黄金矿工（Java语言）1年前 (2023-02-02)
java：递归算法1年前 (2023-02-02)
Linux 发布 JavaWeb 项目1年前 (2023-02-02)
java.lang.NoSuchMethodError: org.junit.platform.commons.util.ReflectionUtils.tryToLoadClass1年前 (2023-02-02)

阿里云国际版