zoukankan      html  css  js  c++  java
  • 使用requestAnimationFrame代替setInterval,解决浏览器内存溢出

    1:为什么要写这样的方法,页面需求是需要实时的请求接口,控制组件的位置。当大量组件使用了计时器,会造成网页内存溢出。

    const RAF = {
    intervalTimer: null,
    timeoutTimer: null,
    setTimeout (cb, interval) { // 实现setTimeout功能
    let now = Date.now
    let stime = now()
    let etime = stime
    let loop = () => {
    this.timeoutTimer = requestAnimationFrame(loop)
    etime = now()
    if (etime - stime >= interval) {
    cb()
    cancelAnimationFrame(this.timeoutTimer)
    }
    }
    this.timeoutTimer = requestAnimationFrame(loop)
    return this.timeoutTimer
    },
    clearTimeout () {
    cancelAnimationFrame(this.timeoutTimer)
    },
    setInterval (cb, interval) { // 实现setInterval功能
    let now = Date.now
    let stime = now()
    let etime = stime
    let loop = () => {
    this.intervalTimer = requestAnimationFrame(loop)
    etime = now()
    if (etime - stime >= interval) {
    stime = now()
    etime = stime
    cb()
    }
    }
    this.intervalTimer = requestAnimationFrame(loop)
    return this.intervalTimer
    },
    clearInterval () {
    cancelAnimationFrame(this.intervalTimer)
    }
    }
     
    let count = 0
    function a() {
    console.log(count)
    count++
    }
    RAF.setInterval(a, 1000)
  • 相关阅读:
    git上传本地代码
    oracle 时间格式转化以及计算
    windows 下使用sqlplus
    filter 过滤器加载流程
    vscode java
    vscode cpp
    manual jar
    toy jar
    inteli shortcut
    eng
  • 原文地址:https://www.cnblogs.com/binglove/p/11797275.html
Copyright © 2011-2022 走看看