[JavaScript知识库]VUE中给添加节流函数

今天在给vue中的input事件添加节流函数时，遇到了很多坑，大部分问题都来自于vue的this指向问题，这里先记录一下如果不加节流时

element.addEventListener(event, function, useCapture);
第一个参数：事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】；

第二个参数：事件触发后调用的函数；

第三个参数：（布尔值，可选）用于描述事件是冒泡还是捕获；

注意：不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。

调用外部函数时一定不要加（）

可以使用函数名，来引用外部函数:

element.addEventListener("click", function(){ alert("Hello World!"); });

element.addEventListener("click", myFunction);

function myFunction() {
? ? alert ("Hello World!");
}

向 Window 对象添加事件句柄:

window.addEventListener("resize", function(){
? ? document.getElementById("demo").innerHTML = sometext;
});

传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数：

var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
? ? myFunction(p1, p2);
});
function myFunction(a, b) {
? ? var result = a * b;
? ? document.getElementById("demo").innerHTML = result;
}

2、向vue中添加节流

?

//HTML代码 
  <a-input
              v-model="scriptform.topic"
              placeholder="Input Location ID"
              @input="changeTopic"
              :disabled="isTransfer"
   />
//js

   changeTopic(e) {
      this.fnThrottle(this.findLocaiton, 1000, e)();
    },

    fnThrottle(method, delay, e) {
      // timer要写一个全局变量，因为vue自己的机制，使得每次都会创建一个新的执行栈，这样每个timer都不同
      // 函数的闭包不起作用啦
      let timer = this.timer;
      var that = this;
      var _arguments = arguments;

      return function () {
        var context = that;

        if (timer) {
          clearTimeout(timer);
        }
        //再创建一个新的
        that.timer = setTimeout(() => {
          method.apply(context, _arguments);
        }, delay);
      };
    },

    async findLocaiton() {
      const locationId = arguments[2].target.value;
      // 调用后端函数

      const result = await apisearchByLocationId({ locationId });
      // this.locationIdTemplate = JSON.parse(JSON.stringify(result.data));
      this.locationIdTemplate = result.data;
      console.log(this.locationIdTemplate);
    },