博客

今日分享内容

1、颗粒化： 把固定的东西我们可以使用颗粒化单个传值的方式，以实现像继承的这种东西。

 // 颗粒化
  function skin(skin) {
    return function (country) {
      return function (sex) {
        return function (age) {
          return function (name) {
            return {
              skin,
              country,
              sex,
              age,
              name,
              introduction() {
                console.log(
                  `我叫${this.name}，今年${this.age}岁了，性别：${this.sex}，国籍：${this.country}，肤色：${this.skin}`
                );
              }
            }
          }
        }
      }
    }
  }

  var yellow = skin('黄色');
  var singapor = yellow('新加坡');
  var chinese = yellow('中国');
  var men = chinese('男');
  var women = chinese('女');

2、节流防抖：

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

<input type="text" id="input" /> （注：input写在HTML中）

function debounce(fn, daly) {
    // fn是要传入的进行防抖的函数，daly是等待时间。
    let timer = null;
    return function () {
      // 每次都要清除这个定时器
      clearTimeout(timer);
      // 重启这个定时器
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, daly);
    }
  }

  let index = 0;
  document.all.input.oninput = debounce(e => {
    console.log(e);
    console.log(++index);
  }, 500);

2.节流： 所谓节流，就是指连续触发事件但是在 n秒 中只执行一次函数。

function throttle (fn, delay) {
  // fn是要进行节流的函数，delay是等待时间

  // 利用闭包保存时间
  let prev = Date.now();
  
  return function () {
    let context = this;
    let arg = arguments;
	let now = Date.now();
	if (now - prev >= delay) {
	    fn.apply(context, arg);
	    prev = Date.now();
	}
  }
}

function fn () {
  console.log('节流');
}

addEventListener('scroll', throttle(fn, 1000));