boxmoe_header_banner_img

Hello! 欢迎来到盒子萌!

加载中

文章导读

25柯里化与节流防抖


avatar
Jack 2022年 11月 25日 150

拓展部分

1. 函数相关

柯里化函数(currying)

在数学和计算机科学中,柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。

 function currying(fn) {
      const args = Array.prototype.slice.call(arguments, 1);
      const inlay = function () {
        if (arguments.length === 0) {
          return fn.apply(this, args);
        }
        if(arguments.length > 0 ){
            Array.prototype.push.apply(args, arguments);
            return inlay;
        }
      }
      return inlay;
    }
    function add() {
      const vals = Array.prototype.slice.call(arguments);
      return vals.reduce((pre, val) => {
        return pre + val;
      });
    }
    let newAdd = currying(add, 1, 2, 3);
    newAdd(4, 5);
    newAdd(6, 7)(6)(2, 3);
    console.log(newAdd()); //39

偏函数 (partial)

在计算机科学中,局部应用(偏函数)是指固定一个函数的一些参数,然后产生另一个更小元的函数。(什么是元?元是指函数参数的个数,比如一个带有两个参数的函数被称为二元函数。)

function list() {
  return Array.prototype.slice.call(arguments);
}
function addArguments(arg1, arg2) {
    return arg1 + arg2
}
const list1 = list(1, 2, 3); // [1, 2, 3]
const result1 = addArguments(1, 2); // 3
// 创建一个函数,它拥有预设参数列表。
const leadingThirtysevenList = list.bind(null, 37);
// 创建一个函数,它拥有预设的第一个参数
const addThirtySeven = addArguments.bind(null, 37); 
const list2 = leadingThirtysevenList(); 
// [37]
const list3 = leadingThirtysevenList(1, 2, 3); 
// [37, 1, 2, 3]
const result2 = addThirtySeven(5); 
// 37 + 5 = 42 
const result3 = addThirtySeven(5, 10);
// 37 + 5 = 42 ,第二个参数被忽略

柯理化与偏函数区别

  • 柯里化是将一个多参数函数转换成多个单参数函数,也就是将一个 n 元函数转换成 n 个一元函数。
  • 局部应用则是固定一个函数的一个或者多个参数,也就是将一个 n 元函数转换成一个 n – x 元函数。

2. 防抖与节流

在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

防抖 (debounce)

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

ps: 重置普攻

策略: 当事件被触发时,设定一个周期延时执行动作,若周期又被触发,则重新设定周期,直到周期结束,执行动作。 在后期有拓展了前缘防抖函数,即执行动作在前,设定延迟周期在后,周期内有事件被触发,不执行动作,且周期重新设定。

var oInput = $('.input-box');
var oShow = $('.show-box');
var timeOut;
oInput.addEventListener('input', function () {
    timeOut && clearTimeout(timeOut);
    timeOut = setTimeout(function () {
        oShow.innerText = translate(oInput.innerText);
    }, 500);
}, false);

function translate(str) {
    return str.split("").reverse().join("");
}

节流 (throttling)

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

对于节流,有多种方式可以实现 时间戳 定时器 束流等。

ps : 技能CD

策略: 固定周期内,只执行一次动作,若没有新事件触发,不执行。周期结束后,又有事件触发,开始新的周期。 特点: 连续高频触发事件时,动作会被定期执行,响应平滑

计时器版

var oCon = $('.container');
var num = 0;
var valid = true;
oCon.addEventListener('mousemove', function () {
    if (!valid) {
        return false;
    }
    valid = false;
    setTimeout(function () {
        count();
        valid = true;
    }, 500);
}, false);

function count() {
    oCon.innerText = num++;
}

时间戳版

var oCon = $('.container');
var num = 0;
var time = Date.now();
oCon.addEventListener('mousemove', function () {
    if (Date.now() - time < 600) {
        return false;
    }
    time = Date.now();
    count();
}, false);

function count() {
    oCon.innerText = num++;
}

束流器版

var oCon = $('.container');
var num = 0;
var time = 0;
oCon.addEventListener('mousemove', function () {
    time++;
    if (time % 30 !== 0) {
        return false;
    }
    console.log(time)
    count();
}, false);

function count() {
    oCon.innerText = num++;
}


评论(0)

查看评论列表

暂无评论


发表评论

表情 颜文字
插入代码