概述

防抖函数

/**
 * 防抖函数
 *  - 第1次调用直接执行,然后等待delay后，才能delay直接执行
 * @param {Object} func 函数
 * @param {Int} delay 等待秒速
 * @param {Boolean} immediate 是否开启复杂的防抖函数
 * @returns
 */
function debounce(func, delay, immediate = true) {
  let timer;
  return function () {
    if (timer) clearTimeout(timer);
    if (immediate) {
      // 复杂的防抖函数
      // 判断定时器是否为空，如果为空，则会直接执行回调函数
      let firstRun = !timer;
      // 不管定时器是否为空，都会重新开启一个新的定时器,不断输入，不断开启新的定时器，当不在输入的delay后，再次输入就会立即执行回调函数
      timer = setTimeout(() => {
        timer = null;
      }, delay);
      if (firstRun) {
        func.apply(this, arguments);
      }
    } else {
      // 简单的防抖函数
      timer = setTimeout(() => {
        func.apply(this, arguments);
      }, delay);
    }
  };
}

// 运行
let dev1 = document.getElementById('#dev1');
dev1.addEventListener(
  'click',
  debounce(function () {
    // 函数内容
  }, 1000),
);

监听动态生成的元素

/**
 * js监听动态生成的元素 - 事件委托
 * @param {String} eventType js事件类型 click、keyup等
 * @param {String} element 非动态生成的父级元素
 * @param {String} selector 当前需要监听的动态元素
 * @param {Object} fn 函数
 */
function on(eventType, element, selector, fn) {
  if (!(element instanceof Element)) {
    element = document.querySelector(element);
  }
  element.addEventListener(eventType, (e) => {
    const t = e.target;
    if (t.matches(selector)) {
      fn(e);
    }
  });
}

// 运行
on('click', '#div1', 'button', (element) => {
  console.log('button 被点击了');
});

npm 国内镜像

bash

# npm 将软件源地址改为淘宝镜像地址
npm config set registry https://registry.npmmirror.com

# npm查看当前源地址
npm get registry

# npm 将软件源地址恢复成官方默认地址
npm config set registry https://registry.npmjs.org

概述 ​

概述