js_单例模式制作无限弹窗（3s内销毁）

// 单例模式
function getSingle(fn) {
  var result;
  return function() {
    return result || (result = fn.apply(this, arguments))
  }
}

var createLayer = function() {
  // 随机位置
  var div = document.createElement('div')
  var left = "50%",
    top = "50%";
  if (countFlag != 0) {
    left = Math.round(Math.random() * 100) + "%";
    top = Math.round(Math.random() * 100) + "%";
  }
  let page = {
    position: "absolute",
    display: 'none',
    background: "url(pop.jpeg)",
    width: "400px",
    height: "400px",
    boxSizing: "border-box",
    left: left,
    top: top,
    margingTop: "20px",
    margingBottom: "20px",
    border: "1px solid red"
  }
  for (let key in page) {
    div.style[key] = page[key]
  }
  // 关闭按钮
  let pageCloseBtn = document.createElement('button')
  let pageClose = {
    position: "relative",
    float: "right",
    margin: "2px",
    padding: "2px",
    background: "bisque",
    border: "1px",
    color: "dark",
    cursor: "pointer"
  }
  for (let key in pageClose) {
    pageCloseBtn.style[key] = pageClose[key]
  }
  pageCloseBtn.innerText = '关闭'
  // 问题
  let pageQuestionDom = document.createElement('p')
  let pageQuestion = {
    position: "relative",
    left: "3%",
    top: "50%",
    fontSize: "2em",
    fontWeight: "bolder",
    color: "rgb(80,87,133)",
    transform: "translateY(-50%)",
    textAlign: "center"
  }
  for (let key in pageQuestion) {
    pageQuestionDom.style[key] = pageQuestion[key]
  }
  // 回答div
  pageQuestionDom.innerText = "闭包单例模式是否明白"
  let answerDiv = document.createElement('div')
  let btnYes = document.createElement('button')
  btnYes.style.margin = '10px'
  btnYes.innerText = '是'
  let btnNo = document.createElement('button')
  btnNo.innerText = '否'
  btnNo.style.margin = '10px'
  let pageAnswer = {
    position: "relative",
    top: "40%",
    transform: "translateY(-50%)",
    textAlign: "center"
  }
  for (let key in pageAnswer) {
    answerDiv.style[key] = pageAnswer[key]
  }
  // 添加绑定事件
  btnYes.addEventListener('click', initPage)
  btnNo.addEventListener('click', initPage)
  pageCloseBtn.addEventListener('click', initPage)
  answerDiv.appendChild(btnYes) //是
  answerDiv.appendChild(btnNo) //否
  div.appendChild(pageCloseBtn) //关闭的按钮
  div.appendChild(pageQuestionDom) //问题
  div.appendChild(answerDiv) //窗口
  return div
}

// 初始化完成
window.onload = initPage
// object添加监听事件
var count = {
  value: 0
}
Object.defineProperty(count, 'value', {
  value: {
    configurable: true,
    get: function() {
      return data
    },
    set: function(newValue) {
      data = newValue; //更新
      // 触发删除函数
      console.log('触发删除函数')
      deletePagePop();
    }
  }
})
var countFlag = 0
// 单链表存储dom
var createDomList = []
function initPage() {
  count.value = 1; //初始化
  if (countFlag > 0) {
    console.log('开始销毁')
    function deletPageDom() {
      return new Promise(resolve => {
        setTimeout(function() {
          let headPage = createDomList[0]
          console.log('移出的dom', headPage)
          document.body.removeChild(headPage)
          createDomList = createDomList.splice(1, createDomList.length - 1)
            --count.value
        }, 3000)
        resolve('delete')
      })
    }
    async function doDelete() {
      await deletPageDom()
    }
    doDelete();
  }
  console.log('create page')
  var getSingleLogin = getSingle(createLayer)
  let CreateLoginDom = getSingleLogin()
  console.log(CreateLoginDom)
  CreateLoginDom.style.display = 'block'
  // 先进先出
  document.body.appendChild(CreateLoginDom) //加入渲染dom
  count.value = count.value + 1
    ++countFlag
  console.log('count.value=', count.value)
  createDomList.push(CreateLoginDom)
}
function deletePagePop() {
  // 删除第一个出现的
}