连续点击开启实验室功能 #7

DongLee0504 · 2019-03-25T07:34:04Z

需求：用户需在连续点击才能看到某些信息
思路：类似js的节流，点击时记录当前时间，然后与上次时间进行对比。借鉴 https://github.com/jrainlau/rhyke
源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <button>点击</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  var obj = {
    tabTime: 0,
    tabStart: 0,
    tabTime: 0,
    userRhythm: [],
    isTimeout: false,
    timer: null,
    options: {
      el: 'body',
      rhythm: '...',
      dashTime: 400,
      timeout: 2000,
      tabEvent: false,
      matching: () => {},
      matched: () => {},
      unmatched: () => {},
      onTimeout: () => {}
    },
    init: function () {
      this.addEvent({
        el: "button",
        dashTime: 400,
        timeout: 2000,
        rhythm: '.....',
        matching(arr) {
          console.log(arr)
        },
        matched() {
          alert('Monster awoke!!')
        }
      });
    },

    addEvent: function (options) {
      var that = this;
      that.options = Object.assign(that.options, options)
      $(options.el).click(function () {
        that.tabStartEvent = options.tabEvent ? 'touchstart' : 'mousedown';
        that.tabEndEvent = options.tabEvent ? 'touchend' : 'mouseup';
        that.tabStartFunc();
        that.tabEndFunc();
      })
    },
    tabStartFunc() {
      this.stopTimer()
      this.tabStart = new Date().getTime()
    },
    stopTimer() {
      clearTimeout(this.timer)
    },
    tabEndFunc() {
      this.tabTime = new Date().getTime() - this.tabStart
      if (!this.isTimeout) {
        this.tabTime < this.options.dashTime ? this.userRhythm.push('.') : this.userRhythm.push('-')
        this.options.matching(this.userRhythm)
        this.matchRhythem(this.userRhythm)
        this.startTimer()
      } else {
        this.reset()
      }
    },
    matchRhythem(userRhythm) {
      const rhythm = this.options.rhythm
      const testRhythm = userRhythm.join('')
      if (testRhythm.length === rhythm.length && testRhythm === rhythm) {
        this.options.matched()
        this.reset()
      } else if (testRhythm.length === rhythm.length && testRhythm !== rhythm) {
        this.options.unmatched()
        this.reset()
      }
    },
    reset() {
      this.userRhythm = []
      this.isTimeout = false
      this.timeoutStart = 0
      this.timeout = 0
    },
    startTimer() {
      this.timer = setTimeout(() => {
        this.isTimeout = true
        this.reset()
        this.options.onTimeout()
      }, this.options.timeout)
    }
  }
  obj.init();
</script>

</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

连续点击开启实验室功能 #7

连续点击开启实验室功能 #7

DongLee0504 commented Mar 25, 2019

连续点击开启实验室功能 #7

连续点击开启实验室功能 #7

Comments

DongLee0504 commented Mar 25, 2019