• vue写法与普通有点差异，因为vue的this不仅仅是当前的组件对象，还往上继承了vue对象（下文可以看出差异）
• call ,apply都只能继承父级，并不能深度继承
• 因为深度继承需要递归或者多层嵌套函数，代码量大且难维护，因此推荐下方方法

1.防抖（debounce）

• 含义：触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。

是个连续的过程 ，如限制1s，执行一次，到下次执行又是1s，即：用户停下操作，就执行函数；只要不停止操作，永远不会执行函数内的操作

• 使用场景：防抖常应用于用户进行搜索输入节约请求资源， window 触发 resize 事件时进行防抖只触发一次
• 代码：

* @description 函数防抖 触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。 * @param {Function} func 需要执行的函数 * @param {Number} wait 间隔时间 默认200ms * @param {Boolean} immediate 是否立即执行 true(默认) 表立即执行，false 表非立即执行 * @return {*} * @author liuxin export function VueDebounce(func, wait = 200, immediate = true) { let timeout = null; // 定时器 return function () { let that = this, // this对象 args = arguments; // 参数 if (timeout) clearTimeout(timeout); if (immediate === true) { // 立即执行 var callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, wait) if (callNow) { // func.apply(that, args); // 普通用法 vue3用法 that[func](...args); // vue2用法 else { // 非立即执行 timeout = setTimeout(() => { // func.apply(this, args); // 普通用法 vue3用法 that[func](...args); // vue2用法 }, wait);

• 用法Vue2

methods: { * 点击事件 函数防抖 * 用法：<el-button @click="debounceHandel">点击测试</el-button> debounceHandel: VueDebounce("handlerFunc"), * 点击事件：真正执行的函数 handlerFunc(type) { console.log("测试防抖事件"); this.$emit("click","这是参数"); // 如果用普通用法，则这里会找不到$emit，因为this还往上继承了vue的对象

• 用法vue3

<el-button type="primary" size="default" @click="cleanHandle">测试防抖</el-button>
export default {
  setup() {
    const state = reactive({
     * @description: 一秒执行一次
     * @Author: liuxin
    const cleanHandle = VueDebounce(() => {
      scoket.send(
        JSON.stringify({
          api: "clear_count",
    }, 1000);
    return {
      ...toRefs(state),
      cleanHandle,
2.节流（throttle）
 
含义：高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率。。是个固定的过程 ，如限制1s，则1s内只执行一次，无论怎样，都在会1s内执行相应的操作
使用场景：和防抖使用场景差不多，关键看固定时间内（1s）需要反馈，需要反馈使用节流，即：无论用户是否停下操作，都会固定时间执行函数操作
代码：用法与函数防抖一致
import { ElMessage } from "element-plus";
import "element-plus/es/components/message/style/css"
 * @description 函数节流
 * @param {Function} func 函数
 * @param {Number} wait 延迟执行毫秒数,默认200
 * @param {Number} type 1 表时间戳版，2 表定时器版
function VueThrottle(func, wait=200 ,type) {
    if(type===1){
        let previous = 0;
    }else if(type===2){
        let timeout;
    return function() {
        let that= this;
        let args = arguments;
        if(type===1){
            let now = Date.now();
            if (now - previous > wait) {
                // func.apply(that, args); // 普通用法
                that[func](...args); // vue用法
                previous = now;
                ElMessage.closeAll(); // 关闭所有弹窗
            else {
                ElMessage.error("操作太频繁了哦，稍后再试");
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    // func.apply(that, args)
                    that[func](...args); // vue用法
                    ElMessage.closeAll();// 关闭所有弹窗
                }, wait)
            else {
                ElMessage.error("操作太频繁了哦，稍后再试");
前段时间群友说面试的时候老是分不清防抖和节流。
其实防抖和节流不仅仅在面试中会让大家手写，在实际项目中也可以起到性能优化的作用，所以还是很有必要掌握的。
接下来我就用一杯茶的时间带大家彻底学会手写防抖和节流。
我们先抛开概念不谈，其实在生活中也有很多防抖的例子：
比如你现在使用的电脑，在不使用后一段时间自动休眠 当你再次使用的时候重新激活，并开始你设置的时间倒计时10分钟
在这10分钟内你继续使用电脑又会重新开始倒计时10分钟 当你最后一次使用电脑并离开时重新倒计时10分钟过去
                                    ps：本文将从一个案例出发循序渐进，在其中你不仅能知道防抖是如何实现的，还可以学习到关于 this 、apply、arguments 等知识的具体应用。
Why？为啥要有防抖？
因为有时候频繁的事件触发是没有意义的，不仅影响性能还可能造成卡顿。
为了避免这种情况，我们需要用防抖来解决这个问题。
What？ 啥是防抖？
防抖debounce：
简单来说，防抖的效果就是在你连续点击了同一个事件在n秒后，只会触发一次。
                                    Vue中防抖(debounce)、节流(throttle)的介绍与运用 防抖是在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。节流是 规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。
那它就会改变
不知道你使用在Vue-methods里面使用 this.fn() 调用你所写的方法
实际上在这里@input=searchFile的时候就已经进行了this.searchFile
进行调用this指向
                                    场景：表单提交时，连续点击按钮的话会提交多次请求，为避免这种情况，我们就可以使用节流，说白了就是限制频率，比如在2秒内无论点击了多少次，都只请求一次接口
示例代码用的是Lodash库的语法，你也可以自己封装
export default {
	return {
		methods: {
			getList: _.throttle(function () {
				//...
			}, 1000, { 'trailing': false })
<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
  Vue.createApp({
    methods: {
      // 用 Lodash 的防抖函数
      click: _.debounc...
                                    手把手教你写js节流和防抖
一、问题场景
很多时候，我们的代码中间会出现异步操作，例如向后台发送请求，窗口的resize事件等，这些操作会耗费事件，拿向后台发送请求来说，如果点击按钮发送请求，而用户在短时间内发送多次请求，一方面服务器压力会比较大，另一方面讲实际只有最后一次的请求结果是有用的，在用resize来说，改变窗口尺寸时会触发resize，但其实我们大多数情况下只需要最后一次回调的结果，而不是多次回调。为了解决这个问题，我们引入节流和防抖两种方法
二、问题解决
节流和防抖都是在使用高阶函数的内容
                                    开发中经常会遇到频繁调接口，导致性能降低的情况，类似输入框的值改变就会调一次接口，那么就应该加一个防抖函数，避免频繁调取接口，话不多说，上代码。在输入框输入值，等待1000毫秒后，会执行打印事件。然后在vue页面中直接引入就好了，下面是事例。2.在methods的函数中添加一下防抖。1.首先导入刚才写好的防抖函数。