《常见的JavaScript代码块》

发表于 分类于 ， Valine：

防抖与节流函数

防抖和节流的作用都是在高频事件中防止函数被多次调用，是一种性能优化的方案。

区别在于，防抖函数只会在高频事件结束后 n 毫秒调用一次函数，节流函数会在高频事件触发过程当中每隔 n 毫秒调用一次函数。

防抖函数

触发高频事件后一段时间（wait）只会执行一次函数，如果指定时间（wait）内高频事件再次被触发，则重新计算时间。

封装

1
2
3
4
5
6
7
8
9
10
11
12
// 防抖函数
function debounce(func, wait) {
  let timeout = null;
  return function () {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

节流函数

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 节流函数
function throttle(func, wait) {
  let timeout = null;
  return function () {
    let context = this;
    let args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}

防抖和节流的应用场景

防抖应用场景

  • scroll 事件滚动触发事件
  • 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
  • 表单验证
  • 按钮提交事件。
  • 浏览器窗口缩放，resize 事件(如窗口停止改变大小之后重新计算布局)等。

节流的应用场景

  • DOM 元素的拖拽功能实现（mousemove）
  • 搜索联想（keyup）
  • 计算鼠标移动的距离（mousemove）
  • Canvas 模拟画板功能（mousemove）
  • 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
  • 监听滚动事件判断是否到页面底部自动加载更多

将一维数组按照指定的长度转成二维数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function pages(arr, len) {
  const pages = [];
  arr.forEach((item, index) => {
    const page = Math.floor(index / len);
    if (!pages[page]) {
      pages[page] = [];
    }
    pages[page].push(item);
  });
  return pages;
}

// 使用
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(pages(arr, 3)); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
console.log(pages(arr, 8)); // [[1, 2, 3, 4, 5, 6, 7, 8], [9]]

判断是否为移动端浏览器

1
2
3
4
5
6
7
8
const flag = navigator.userAgent.match(
  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
);
if (flag) {
  // 移动端
} else {
  // PC端
}

随机打乱数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function shuffle(arr) {
  // 随机打乱数组
  let _arr = arr.slice(); // 调用数组副本，不改变原数组
  for (let i = 0; i < _arr.length; i++) {
    let j = getRandomInt(0, i);
    let t = _arr[i];
    _arr[i] = _arr[j];
    _arr[j] = t;
  }
  return _arr;
}
function getRandomInt(min, max) {
  // 获取min到max的一个随机数，包含min和max本身
  return Math.floor(Math.random() * (max - min + 1) + min);
}