input 实现节流函数

要实现input的节流函数，可以使用定时器或时间戳两种方式。下面是两种实现方式的代码示例：

定时器实现方式：

// 定时器实现节流函数
function throttle(fn, delay) {
  let timer = null;
  let flag = true;
  return function (...args) {
    if (!flag) return;
    clearTimeout(timer);
    flag = false;
    timer = setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
}

// 监听input事件并应用节流函数
let inputElement = document.getElementById('input');
let fn = throttle(function(e) {
  console.log('节流成功', e.target.value);
}, 2000);
inputElement.addEventListener('input', fn);

时间戳实现方式：

// 时间戳实现节流函数
function throttle(fn, delay) {
  let previous = 0;
  return function (...args) {
    let now = Date.now();
    if (now - previous > delay) {
      fn.apply(this, args);
      previous = now;
    }
  };
}

// 监听input事件并应用节流函数
let inputElement = document.getElementById('input');
let fn = throttle(function(e) {
  console.log('节流成功', e.target.value);
}, 2000);
inputElement.addEventListener('input', fn);

这两种方式都可以实现input的节流函数，通过设置合适的延迟时间，可以控制函数的执行频率，避免频繁调用查询接口。
#### 引用[.reference_title]
- *1* *3* [JS写定时器节流函数 配合Oninput事件](https://blog.csdn.net/qq_45619623/article/details/111622828)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [JS节流函数的实现](https://blog.csdn.net/weixin_45309872/article/details/111562303)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]