JS节流和省钱是什么关系？

沐爸muba

已于 2024-09-02 15:04:27 修改

阅读量1.1k

点赞数 16

分类专栏： JavaScript 面试题文章标签： javascript 前端 vue react.js

于 2024-08-16 11:07:30 首次发布

本文链接：https://blog.csdn.net/m0_37943716/article/details/141254255

版权

面试题同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

JavaScript

20 篇文章 0 订阅

订阅专栏

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注。

都说花钱如流水，那么怎么攒到钱呢？除了努力挣钱，节流（即控制支出、减少不必要的开销）起到了非常重要的作用，大白话就是省钱。

JS中的节流和生活中的节流有异曲同工之妙，我们一起了解下吧，看下什么是节流、函数的实现、节流的应用场景、防抖和节流的区别、lodash的节流函数以及节流在框架中的使用。

一、什么是节流（Throttle）

节流技术确保函数在指定的时间间隔内最多只执行一次。比如说频繁点击，如果你希望在2s内，无论点击多少次，只执行1次，那就是节流，如果你持续点击，每隔2s都会触发执行。

二、函数实现

function throttle(fn, limit) {
  let inThrottle;
  return function () {
    const args = arguments, context = this;
    if (!inThrottle) {
      fn.apply(context, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

使用示例：

<button id="btn">测试节流</button>

<script>
  var btn = document.getElementById("btn");
  btn.onclick = throttle(function () {
    console.log("节流");
  }, 2000);
</script>

三、应用场景

节流适用于高频事件，如键盘输入、滚动事件、浏览器缩放、鼠标移动、连续按键等，同时要求每隔一段时间就执行一次的场景。也就是说，对于任意频繁操作，你只要想每隔一段时间才触发一次操作，那么就可以使用节流。

四、防抖和节流的区别

防抖（Debounce）和节流（Throttle）都是用来控制函数执行频率的技术，区别在于，以连续点击举例，限制频率为2s内触发一次事件，那么防抖的表现是两次点击的时间间隔只要小于2s，事件永远不会触发，大于2s时，执行一次，而节流的表现是，每隔2s事件触发一次。

五、lodash的节流函数

Lodash 是一个流行的 JavaScript 实用工具库，它提供了很多现成的函数式编程工具，包括节流（throttle）功能。

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Throttle</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@latest/lodash.min.js"></script>
  </head>
  <body>
    <button id="btn">测试节流</button>
    <script>
      var btn = document.getElementById('btn')
      btn.onclick = window._.throttle(function () {
        console.log('节流')
      }, 2000)
    </script>
  </body>
</html>

六、节流与框架

假设是百度的搜索框，每1s执行一次搜索请求，返回搜索建议的数据。我们看下Vue2、Vue3和React中都怎么使用节流。

Vue2

import _ from 'lodash';

export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  watch: {
    searchQuery: _.throttle(function (newValue) {
      console.log('搜索查询更新:', newValue);
      // 执行搜索逻辑
    }, 1000)
  },
  methods: {
    // 其他方法...
  }
}

Vue3

import _ from 'lodash';
import { reactive, watch } from 'vue';

const state = reactive({
  searchQuery: ''
});

const throttleSearch = _.throttle((newValue) => {
  console.log('搜索查询更新:', newValue);
  // 执行搜索逻辑
}, 1000);

watch(() => state.searchQuery, (newValue, oldValue) => {
  throttleSearch(newValue);
});

React

import React, { useState, useCallback } from 'react';
import _ from 'lodash'; // 引入Lodash库

const SearchComponent = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const throttleSearch = useCallback(
    _.throttle((term) => {
      console.log('搜索:', term);
      // 执行搜索逻辑
    }, 1000),
    []
  );

  const handleInputChange = (event) => {
    setSearchTerm(event.target.value);
    throttleSearch(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={handleInputChange}
      placeholder="输入搜索内容"
    />
  );
};

export default SearchComponent;