闭包/递归

文章目录

• 前言
• 一、概念简介
• 二、实战应用场景案例
  • 1.实现跑马灯效果
  • 2.倒计时函数

---

前言

        闭包/递归——让javascript拥有更多可能，能够熟练使用闭包和递归是跃进成为一名成熟前端必要掌握的技能，前端在处理一些复杂逻辑上，闭包/递归使得化繁为简、让不可能有可能

---

一、闭包简介

        闭包 是能够读取其他函数内部变量的函数。听起来有点绕口，本质上闭包是将函数内部和函数外部连接起来的桥梁。

        递归 是函数在内部调用其本身，那么这个函数就是递归函数。

二、实战应用场景案例

1.实现跑马灯效果（递归的运用）

        需求场景描述，基于Vue项目之上，实现一个点击抽奖的轮盘跑马灯效果

代码如下（示例）：

move(start, step, loop) {
      const _this = this
      this.canRun = false
      setTimeout(function () {
        if (start < loop) {
          _this.maskList = [1, 1, 1, 1, 1, 1, 1, 1]
          _this.maskList[start % 8] = 0
          start++
          _this.move(start, step, loop)
        } else {
          _this.canRun = true
          _this.showPrizeModal = true
        }
      }, step)
}

luckDraw() {
      if (!this.canRun) return
      this.chance < 1 ? (this.chance = 4) : this.chance--
      this.move(0, 80, 25)
 }

2.倒计时函数（闭包的运用）

代码如下（示例）：

function DownTime(minutes, fn) {
  clearInterval(downFn)
  let thisEndTime = new Date().getTime() + minutes * 60 * 1000
  var downFn = setInterval(() => {
    let newTime = new Date().getTime() 
    let backTime = thisEndTime - newTime 
    var m = Math.floor(backTime / (1000 * 60) % 60)
    var s = Math.floor(backTime / 1000 % 60)
    if (backTime < 0) {
      clearInterval(downFn)
    }
    fn(m, s, downFn)
  }, 1000)
}

---