页面中实现setInterval和setTimeout效果示例详解

function setTimeout_(dalay) {
  // 第一次的时间戳
  const timestampFirst = Date.now()
  // 返回一个promise对象
  return new Promise(reslove => {
    // 操作
    function handle() {
      // 每一次的时间戳
      const timestamp = Date.now()
      // 当时间戳减去后大于延迟时间
      if ((timestamp - timestampFirst) >= dalay) {
        // 成功回调
        reslove()
      } else {
        // 递归
        handle()
      }
    }
    // 初次调用
    handle()
  })
}
setTimeout_(10).then(() => {
  alert(10)
})

function trampoline(f){
  while(f && f instanceof Function && falg){
   f = f()
  }
  return f
}

// 定时器
function setTimeout_(dalay) {
  // 第一次的时间戳
  const timestampFirst = Date.now()
  // 返回一个 Promise 对象
  return new Promise(reslove => {
    // 具体操作
    function handle() {
      // 每一次的时间戳
      const timestamp = Date.now()
      // 当时间戳减去后大于延迟时间
      if ((timestamp - timestampFirst) >= dalay) {
       // 成功回调
        reslove()
      } else {
       // 不满足条件继续调用
        return handle
      }
    }
    // 调用蹦床函数、将递归变为循环
    trampoline(handle)()
  })
}
// 蹦床函数
function trampoline(f){
  while(f && f instanceof Function){
    f = f()
  }
  return f
}
setTimeout_(1000).then(res => {
  alert(1000)
})

// 如果 falg 为 false就不会继续执行循环操作
let falg = true
// 蹦床函数技术，利用循环
function trampoline(f){
  while(f && f instanceof Function && falg){
    f = f()
  }
  return f
}
// 计时器
function setInterval_(f, dalay) {
  // 第一次的时间戳
  let timestampFirst = Date.now()
  // 操作
  function handle() {
    // 每一次的时间戳
    const timestamp = Date.now()
    if ((timestamp - timestampFirst) >= dalay) {
      // 间隔时间到了就重置第一次时间戳
      timestampFirst = Date.now()
      // 调用函数
      f()
    }
    return handle
  }
  trampoline(handle)()
}
let count = 0
// 调用
setInterval_(function() {
  count ++
  if (count === 3) {
    falg = false
  }
  console.log(count)
}, 1000)