面试-连续点击7次5s内弹窗显示

335 阅读1分钟

需求

客户连续点击按钮5秒内点击7次发送请求,反之不发送 思路

  1. 模拟个长度为6的队列

  2. 用户点击7次的时候是个临界点,此时判断一下是否本次点击与第一次点击是否相差5s

上代码

HTML

<button onclick="clickMe()">点我啊</button>

js

    var queue = []
 function clickMe(){
        const timestamp = Date.parse(new Date())
         if(queue.length === 6){
            //判断用户在每次点击的时候 是否够7次
          let s = timestamp - queue[0]
           //如果够7次就判断一下 这次点击的时间戳跟第一次点击的事件戳间隔是否相差5s
          if(s<=5000){
              alert('hello world')
              //是的话 就 清空队列,做操作
              queue = []
              return 
          }else {
            //不是的话 就进队同时出队,保持队列最大长度为6
            queue.push(timestamp)
            queue.shift()
          }
       }else{
           //反之只做入队操作即可
        queue.push(timestamp)
       }    
            
     }