zoukankan      html  css  js  c++  java
  • 写一个限制执行次数的函数

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

    原理分析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);
            }
          } 
  • 相关阅读:
    skywalking请求头传输协议
    一篇文章带你搞懂SkyWalking调用链追踪框架
    zuihou-admin-cloud很经典的一个微服务开发平台,能够详细的看里面的视频https://www.kancloud.cn/zuihou/zuihou-admin-cloud/1411215
    skywalking权限验证功能
    哔哩哔哩中Openshift红帽培训
    ElasticSearch中文社区视频教程地址
    浅谈一些有趣的区间问题
    浅谈区间最小点覆盖
    洛谷 P1325 雷达安装
    CF12B Correct Solution?
  • 原文地址:https://www.cnblogs.com/theone67/p/8000396.html
Copyright © 2011-2022 走看看