针对一些input、resize、scroll函数 ，我们给这些函数绑定事件后，他会在短时间内频繁的触发，非常影响性能。

自己理解的栗子 ： 我们平常在购物网站或者百度啊进行搜索的时候，他会根据我写入输入框的内容，给予我不同的搜索提示，例如 今天正是双11 、618 等某宝购物的节日，当时正是0:00:00分，大家正在这时候要进行搜索选自己要购买的商品，一个用户每输入一次内容 他会调用一次请求，如果是只有一个人，不会对服务器造成影响，而向某宝等大型购物网站用户是非常的庞大，而当时又是购物平台的节日，是不是对服务器进行超高数量请求啊，如果最后导致服务器崩溃，那损失的可不是一块两块钱哦。

防抖(debounce)例子

等电梯：进电梯的时候，电梯会检测到有人进来，比如会等待5秒，在这5秒之内，又有人进来，电梯又会检测，又会等待5秒，以此类推，只有最后一次进来的时候在等5秒在关上电梯门。

所以说函数防抖不会立即去触发，会等待上一个事件执行完的指定时间后再去执行。

data(){
return {
  clearId:null
      clearInterval(this.clearId)
      // 如果搜索等于空 直接停止 Uncaught SyntaxError: Unexpected identifier
      this.clearId = setTimeout(() => {
        this.doAjax()
      }, 500)

总结： 不断创建定时器，小于定时器的时间不断销毁

二、节流(throttle)

 data () {
    return {
      timer: 0
      const dt = Date.now()
      if (dt - this.timer > 1000) {
        this.doAjax()  //大于1s调用函数
        this.timer = dt
      } else {
        console.log('当前时间戳是'+dt)
创建一个时间戳赋值给timer 下次的时间戳减去上次的时间戳 间隔大于1s 才会去固定触发这个函数，只要小于1s永远不会触发 
 
防抖和节流的区别
 
1.共同点：降频，
 
2.不同点 ：思路不同
 
  1. 防抖：某个时间内不能再次触发，一旦触发，就要重新计算
 
  2. 节流：限制相邻两次调用的时间间隔
 
注意点 ：防抖和节流不止上面两种方案可以执行 
                    一、理解函数抖动针对一些input、resize、scroll函数，我们给这些函数绑定事件后，他会在短时间内频繁的触发，非常影响性能。抖动例子自己理解的栗子 ： 我们平常在购物网站或者百度啊进行搜索的时候，他会根据我写入输入框的内容，给予我不同的搜索提示，例如今天正是双11 、618 等某宝购物的节日，当时正是0:00:00分，大家正在这时候要进行搜索选自己要购买的商品，一个用户每输入一次内容 他会调用一次请求，如果是只有一个人，不会对服务器造成影响，而向某宝等大型购物网站用户是非常的庞大，..
				
事件的节流（throttle）与防抖（debounce）
上一节我们一起通过监听滚动事件，实现了各大网站喜闻乐见的懒加载效果。但我们提到，scroll 事件是一个非常容易被反复触发的事件。其实不止 scroll 事件，resize 事件、鼠标事件（比如 mousemove、mouseover 等）、键盘事件（keyup、keydown 等）都存在被频繁触发的风险。
频繁触发回调导致的大量计算会引发页面的抖动甚至卡顿。为了规避这种情况，我们需要一些手段来控制事件被触发的频率。就是在这样的背景下，throttl
<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
  Vue.createApp({
    methods: {
      // 用 Lodash 的防抖函数
      click: _.debounc...
				
throttle 应用场景：鼠标多次点击按钮进行操作，输入框频繁搜索内容等条件下，为节省资源使用节流。(单位时间内只触发一次)
debounce应用场景：滚动加载请求数据，window触发resize的时候，使用防抖函数可以让其只在最后触发一次。
节流（throttle）和防抖（debounce）的区别：函数防抖和函数节流都是防止某一时间频繁触发，防抖和节流原理却不一样。函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。节流是在频繁操作的情况下按照给定的时间定时执行，防抖在频繁操作过程中会清楚
				
防抖（debounce）：
 当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。
js实现：
 * 函数防抖
function debounce(fn, delay) {
  // 记录上一次的延时器
  var timer = null;
  var delay = delay || 200;
  return function() {
    var args = argume...
含义：触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。
是个连续的过程 ，如限制1s，执行一次，到下次执行又是1s，即：用户停下操作，就执行函数；只要不停止操作，永远不会正在执行函数内的操作
使用场景：防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次
 * @description 函数防抖 触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。
那它就会改变
不知道你使用在Vue-methods里面使用 this.fn() 调用你所写的方法
实际上在这里@input=searchFile的时候就已经进行了this.searchFile
进行调用this指向
项目中有如图所示弹窗,用户编辑完成之后,快速点击确定,进行保存.
列表中会展示刚才保存的数据,可以看到出现了重复的数据.虽然后端已经加了参数名不能重复的校验,但是仍然可以成功保存.此时就需要前端进行节流限制
解决方案：
采用节流函数 对快速点击的操作进行限制：
先在项目中公共的js中编写节流函数 throttle 方便后续多个地方使用
//节流
export function throttle(fn, time) {
  let timer = nu
                    [code=html]
// import { getCode } from "@/api/login";
import { ref, computed, onMounted, onUnmounted } from "vue";
import { mobileReg } from "@/utils/regs";
import { showToast } from "vant";
type CodeType = "reportEvent";
const useSendCode = (type: CodeType) => {
  // 是否已经触发过
  let isTriggered = ref(false);
  // 合计时数
  const countDown = ref(0);
  // 定时器
  let timer: number;
  // 是否禁用
  const disabled = computed(() => countDown.value > 0);
  // 发送按钮的文案
  const sendBtnText = computed(() => {
    if (disabled.value) return `${countDown.value}s后发送验证码`;
    if (isTriggered.value) return "再次发送";
    return "发送验证码";
  const send = async (mobile: string): Promise<void> => {
    if (disabled.value) return;
    console.log("sms send to mobile: ", mobile, type);
    if (!mobileReg.test(mobile)) {
      showToast("手机号格式错误");
      return;
    // await getCode(mobile.value, type); // 假装发了
    isTriggered.value = true;
    countDown.value = 10;
[/code]
                axios二次封装
                      造血干细胞: 
                    写的好清晰哇
                vue3.0基本使用 详细说明！！！
                    易水寒Qy: 
                    文章写的很不错，质量很高