防抖，节流

一：防抖

防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

1.1 作用

作用： 高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间

1.2 应用场景

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
• 文本编辑器实时保存，当无任何更改操作一秒后进行保存

1.3 实现代码

1.3.1 vue3

<template 中

  <n-button type="info" @click="refresh" style="margin-left: 10px"> 刷新 </n-button>

setup 中

const refresh = debounce (()=>{
					 console.log('触发防抖')
				      }, 2000)
		//防抖
		function debounce (fn, delay) {
		  let timer
		  return function () {
		    if (timer) {
		      clearTimeout(timer)
		    }
		    timer = setTimeout(() => {
		      fn()
		    }, delay)
		  }
		};

return 中
把 常量 refresh return出来

二：节流

节流策略（throttle），控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。

2.1 作用

作用： 高频率触发的事件,在指定的单位时间内，只响应第一次。

2.2 应用场景

• 鼠标连续不断地触发某事件（如射击游戏发射子弹），单位时间内只触发一次；
• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
• 浏览器播放事件，每个一秒计算一次进度信息等

2.3 实现代码

<template 中

  <n-button type="info" @click="refresh" style="margin-left: 10px"> 刷新 </n-button>

setup 中

 //节流
		  function throttle (fn, delay) {
		    let isThtottle = ref(true)
		    return () => {
		      if (!isThtottle.value) return
		      isThtottle.value = false
		      setTimeout(() => {
		        fn()
		        isThtottle.value = true
		      }, delay)
		    }
		  }
		
		const refresh = throttle(()=>{
					 console.log('触发节流')
				      }, 2000);

return 中
把 常量 refresh return出来

完成