一些不错的JS 自定义函数第2/2页

一些不错的JS 自定义函数攻略第2/2页

简介

在前一篇攻略中，我们介绍了一些有用的JS自定义函数，并且分析了他们的应用场景和使用方法。在本篇攻略中，我们将继续介绍一些实用的JS自定义函数。

目录

本文将会介绍以下JS自定义函数：

1. debounce
2. throttle
3. trim

debounce

函数名称：debounce

函数功能：函数防抖。在一定时间内，如果事件持续触发，只执行最后一次事件。

函数代码：

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => fn.apply(this, args), delay);
  }
}

使用方法：

function processData() {
  // some data processing goes here...
}
const debounceProcessData = debounce(processData, 300);
document.addEventListener('scroll', debounceProcessData);

throttle

函数名称：throttle

函数功能：函数节流。在一定时间内，如果事件持续触发，则只执行一次。

函数代码：

function throttle(fn, delay) {
  let timer;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        fn.apply(this, args);
      }, delay);
    }
  }
}

使用方法：

function processData() {
  // some data processing goes here...
}
const throttleProcessData = throttle(processData, 300);
document.addEventListener('scroll', throttleProcessData);

trim

函数名称：trim

函数功能：去除字符串两端的空格。

函数代码：

function trim(str) {
  return str.replace(/^\s+|\s+$/g, '');
}

使用方法：

const str = '  hello world   ';
console.log(trim(str)); // 'hello world'

结语

这些函数都是非常实用的JS自定义函数，可以帮助我们解决很多开发中的问题。请根据实际场景选择相应的函数进行使用。如果您有其他好用的自定义函数，欢迎分享。