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

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

原理分析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);
        }
      } 
时间: 2024-10-06 00:53:25

写一个限制执行次数的函数的相关文章

通过正则写一个较为完美的getByClass函数

getByclass传入两个参数,oParent是父集,sClass是要传入class名称 1 function getByClass(oParent,sClass){ 2 var aChild = oParent.getElementsByTagName("*"), 3 result = []; 4 for(var i =0;i<aChild.length;i++){ 5 if(aChild[i].className.match(new RegExp("(\\s|^)

写一个php memcache 简单的函数

在一个项目中添加了memcache层,但由于数据库本来压力就不大,数据量很小,所以性能改善不是特别明显,因此学习并应用下来记录一下方便以后自己使用.这里我只应用了直接调用对应api函数的方法,另外一种方法是创建对象来连接memcache,具体是$mem=new Memcache,然后再调用对象里的方法来操作要存储的item. 本次使用环境为php 5.4.17, yum安装的驱动: php-pecl-memcache-3.0.8-1.el5.remi 代码如下: $MEMCACHE["host&

用Python写一个批量生成账号的函数(用户控制数据长度、数据条数)

# 1.写一个函数,批量生成一些注册使用的账号:产生的账号是以@163.com结尾,长度由用户输入,产生多少条也由用户输入,用户名不能重复,用户名必须由大写字母.小写字母.数字组成 import random,stringdef Users(num,len): result = [] a = string.ascii_lowercase b = string.ascii_uppercase c = string.digits d = string.ascii_letters count = 0

Python写一个批量生成账号的函数

批量生成账户信息,产生的账户由@sina.com结尾,长度由用户输入,产生多少条也由用户输入,用户名不能重复,用户名必须由大写字母.小写字母和数字组成. 1 def Users(num,len): # num产生多少条信息,len账号的长度 2 ''' 3 用交集来判断是否包含大小写字母 4 :param num: 生成几条数据 5 :param len: 账号的长度 6 :return: 7 ''' 8 results = [] # 存放结果的数组 9 uppers = set(string.

用JavaScript写一个类似PHP print_r的函数

PHP print_r的函数很好用,网上娱乐城可以用来打印数组.对象等的结构与数据,可惜JavaScript并没有原生提供类似的函数.不过我们可以试着自己来实现这个函数,下面提供一些方法与思路. 方法一 function print_r(theObj) { var retStr = ''; if (typeof theObj == 'object') { retStr += '<div style="font-family:Tahoma; font-size:7pt;">'

写一个dup2功能同样的函数,不能调用 fcntl 函数,而且要有出错处理

实现的时候用到系统原来的dup函数 // mydup2.c // 2015/08/17 Lucifer Zhang version1.0 // write my own dup2 function // use dup() function when inplementation #include <unistd.h> // include dup() #include <stdio.h> #include <stdlib.h> #define OPEN_MAX 256

写一个二维数组排序算法函数,能够具有通用性,可以调用php内置函数

下面代码没有认真看: <?php //二维数组排序, $arr是数据,$keys是排序的健值,$order是排序规则,1是升序,0是降序 function array_sort($arr, $keys, $order = 0) { if (!is_array($arr)) { return false; } $keysvalue = array(); foreach ($arr as $key => $val) { $keysvalue[$key] = $val[$keys]; } if ($

写一个少于 80 字符的函数,判断一个字符串是不是回文字符串

废话不多说,直接上代码: 1 function isPalindrome(str){ 2 return (str === str.split('').reverse().join('')); 3 } 4 5 console.log(isPalindrome('1 $bb$1')); // false 6 console.log(isPalindrome('1$bb$1')); // true

写一个ES6 的遍历目录函数

// npm init // npm install koa --save-dev // node --harmony app.js const fs = require('fs'); var eachDir = (() => { let queue = []; var eachFiles = (options) => { if (queue.length) { let path = queue.shift(); fs.readdir(path, (err, files) => { if