每隔2秒请求本地的数据，获取数据后，渲染页面。必须等上次结果完成后，才能执行下一次结果

半夏ing

于 2023-05-19 14:28:54 发布

阅读量109

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Fiona_lms/article/details/130766006

版权

文章介绍了获取本地数据的两种方式，一是通过异步函数调用接口进行GET请求，二是利用requestAnimationFrame进行动画帧同步操作。示例代码展示了如何使用async函数进行数据获取和渲染，以及如何定制requestAnimationFrame的执行频率来调用回调函数。

摘要由CSDN通过智能技术生成

获取本地的数据，除了直接引入文件，也可以通过接口get请求获取

async function loop() {
  try {
    const data = await getDataAndRender();
    console.log(data);
  } catch(err) {
    console.log(err.message);
  }
  
  setTimeout(loop, 2000);
}

loop();

或者

function animate(cb,time){
    let myReq;    // 记录requestAnimationFrame的返回值
    let i = 1;    // 记录requestAnimationFrame的执行次数（屏幕刷新次数）
    myReq = requestAnimationFrame(function fn(){    // 开启初始requestAnimationFrame
        // 计数器 % (60/一秒钟执行的次数)
        if(i%parseInt(60/(1000/time)) == 0){
            cb();    // 执行真正要做的事情
        }
        i++;    // 记录requestAnimationFrame执行的次数
        myReq = requestAnimationFrame(fn);    // 开启下次requestAnimationFrame
        window.myReq = myReq;    // 将requestAnimationFrame返回值暴露，方便清除
    });
}

function test(){
console.log('我在测试');
}
// 测试
animate(test, 1000);    // 自定义执行时间