目前在用vue,由于其是数据和页面渲染绑定的,我一个函数内修改数据,在函数没执行完之前,页面是不渲染的,所以进度条只能在完全加载完毕后,显示个100%
后来想用原生,才发现原生也是一样的,必须函数处理之后才展示页面
用excel的vba时不是如此,可以实时修改表格数据的,也就是你能看到“刷”的过程
请问js怎么实现啊?
我目前是有个大table,本地的不需要网络,计算出来要10秒左右时间,我打算做个进度条
但由于不涉及网络异步问题,所以这10秒完全是计算时间,cpu猛跑的那种
请问怎么才能一边猛跑,一边还能实时渲染数据呢?谢谢

解决方案 »

  1.   

    举个例子:
    我写
    function(){
      for(let i=0;i<9999999999999999999999;i++
      docment.getelementbyid("input").value=i
    }
    这种是执行不了的,必须等循环结束后,页面才显示
    怎么才能让他实时更新呢?
    谢谢
      

  2.   

    之所以不采用延时,是因为本来加载就够慢的了,再延时就更慢了……
    而且主要计算的函数用的foreach,在中间运行一段来个延时,代码太乱,也不现实
    另外,感觉控制台输出的时候,是可以一定时间内更新的,就是
    for(let i=0;i<1000000;i++){
                document.getElementById("jishiqi").value=i
                console.log(i)
    }
    页面不更新,控制台是以大概1秒一次的速度更新的
    请问如何做到的呢?谢谢
      

  3.   

    在一个js线程执行过程中页面是不会重新渲染的。
    你需要把一个js线程拆分成多个js线程来执行,js线程之间用 setTimeout(function(){}, 0);衔接。
      

  4.   

    问题在于这么写就太乱了
    有没有sleep这类方法呢?
      

  5.   

    问题在于这么写就太乱了
    有没有sleep这类方法呢?
    function sleep(gen) {
    var obj = gen.next();
    if (!obj.done) {
    setTimeout(function(){
    sleep(gen);
    }, obj.value);
    }
    }function* myname() {
    for (var i = 0; i < 100; i++) {
    document.getElementById("id").innerHTML = i;
    yield 50; //延时的毫秒数
    }
    }sleep(myname());
      

  6.   

    问题在于这么写就太乱了
    有没有sleep这类方法呢?
    function sleep(gen) {
    var obj = gen.next();
    if (!obj.done) {
    setTimeout(function(){
    sleep(gen);
    }, obj.value);
    }
    }function* myname() {
    for (var i = 0; i < 100; i++) {
    document.getElementById("id").innerHTML = i;
    yield 50; //延时的毫秒数
    }
    }sleep(myname());

    多谢!
    虽然我看不太懂,但的确能用
    再问一下,我如果想在带*的方法中,引用另外一个方法,相当于抽个通用方法出来,想在那个通用方法里用yield貌似不好用
    另外在本方法里的foreach方法或者什么some等方法里同样用不了,请问怎么办?谢谢
      

  7.   

    问题在于这么写就太乱了
    有没有sleep这类方法呢?
    function sleep(gen) {
    var obj = gen.next();
    if (!obj.done) {
    setTimeout(function(){
    sleep(gen);
    }, obj.value);
    }
    }function* myname() {
    for (var i = 0; i < 100; i++) {
    document.getElementById("id").innerHTML = i;
    yield 50; //延时的毫秒数
    }
    }sleep(myname());
    大概琢磨了一下,就是这个yield必须是放在以*为开头的函数中,出去就不行,哪怕this是一个也不行
    那这就麻烦了,我不能全用for i=0这种格式的循环吧……还有for filter呢也不行吧,也就是只要又有一个函数就不行是吧……
      

  8.   

    比较典型的多线程场景,推荐使用Worker,一个独立的线程处理运算密集的任务,主线程负责和UI的交互。具体的介绍可以参考一下的blog http://www.ruanyifeng.com/blog/2018/07/web-worker.html