写一个限制执行次数的函数

Posted 2020-10-17 再多bug也要往前走

前言：当监听窗口的下拉事件或者输入框的输入事件时，会频繁的触发所监听的函数，我们并不想如此频繁的执行那些我们定义的函数，这样会造成一些不好的用户体验，接下来我们就开始解决这个问题

原理分析1：假如我们定义的监听函数名字是fun，那么问题的实质就是fun这个函数会被在短时间内调用多次，那么这样的话我们可以想到的是在每次将要调用fun函数时记录下当下的时间戳，不要立刻执行这个函数，而是设置一个定时器，在500毫秒之后再执行，同时再判断如果两次触发的时间间隔小于500毫秒那么就意味着上一次触发时的fun函数还没有被调用触发时刻又到了，所以clear掉上次的定时器，当然本次触发也是在500毫秒之后再执行fun函数。

原理1代码：

一些初始值：

data: {
      question: ‘‘,
      i: 0,
      last: 0,
      timeP: 0
    },

代码如下：

      question: function(val) {
        var now = Date.now();
        var self = this;
        if (now - this.last < 500) {
          clearTimeout(this.timeP);
        }
        this.timeP = setTimeout(function (){
          self.ajax();
        }, 500);
        this.last = now;
      }

代码执行结果：在这种情况下，我们会发现当频繁的触发（两次之间的间隔在500毫秒）fun函数时，只有最后一次触发会执行fun函数

 

但是，我们又有了一个新的需求：我们并不想在频繁的触发这段时间内只有最后一次触发会成功，我们想在频繁的触发这段时间每500毫秒执行一次（第一次和最后一次都要被执行到）。

这时我们的代码就成为了：

      question: function(val) {
        var now = Date.now();
        var self = this;
        if (now - this.last < 500) {
          clearTimeout(this.timeP);
          this.timeP = setTimeout(function (){
            this.last = now;
            self.ajax();
          }, 500);
        } else {
          this.last = now;
          self.ajax();
        }
      }

 

这样写更好

      question: function(val) {
        var self = this;
        var now = Date.now();
        clearTimeout(self.timeP);
        if (now - self.last > 1000) {
          self.ajax();
          self.last = now;
        } else {
          self.timeP = setTimeout(function () {
            self.ajax();
            self.last = now;
          }, 500);
        }
      }