te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>JavaScript setTimeout() slows down under heavy load - Stack Overflow
最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

JavaScript setTimeout() slows down under heavy load - Stack Overflow

programmeradmin5浏览0评论

I've created a script that fades the background color of an element. I use setTimeout() to make an incremental change to the color every 5 ms. The script works great if I'm just fading the background color of one thing at a time, but if I've got, say, 50 elements I'm all fading at once, the speed is much slower than 5 ms because of all the concurrent setTimeout()s running at once. A fade that normally should execute in 1 second, for example, may take 30 seconds if I'm fading 50 elements at once.

Any ideas how I can overe this?

Here's the script in case anyone has an ideas:

function fadeBackground(elementId, start, end, time) {
    var iterations = Math.round(time / 5);

    var step = new Array(3);

    step[0] = (end[0] - start[0]) / iterations;
    step[1] = (end[1] - start[1]) / iterations;
    step[2] = (end[2] - start[2]) / iterations;

    stepFade(elementId, start, step, end, iterations);
}

function stepFade(elementId, cur, step, end, iterationsLeft) {
    iterationsLeft--;

    document.getElementById(elementId).style.backgroundColor
        = "rgb(" + cur[0] + "," + cur[1] + "," + cur[2] + ")";

    cur[0] = Math.round(end[0] - step[0] * iterationsLeft);
    cur[1] = Math.round(end[1] - step[1] * iterationsLeft);
    cur[2] = Math.round(end[2] - step[2] * iterationsLeft);

    if (iterationsLeft > 1) {
        setTimeout(function() {
            stepFade(elementId, cur, step, end, iterationsLeft);
        }, 5);
    }
    else {
        document.getElementById(elementId).style.backgroundColor 
            = "rgb(" + end[0] + "," + end[1] + "," + end[2] + ")";
    }
}

It's used like this:

fadeBackground("myList", [98,180,232], [255,255,255], 1000);

I've created a script that fades the background color of an element. I use setTimeout() to make an incremental change to the color every 5 ms. The script works great if I'm just fading the background color of one thing at a time, but if I've got, say, 50 elements I'm all fading at once, the speed is much slower than 5 ms because of all the concurrent setTimeout()s running at once. A fade that normally should execute in 1 second, for example, may take 30 seconds if I'm fading 50 elements at once.

Any ideas how I can overe this?

Here's the script in case anyone has an ideas:

function fadeBackground(elementId, start, end, time) {
    var iterations = Math.round(time / 5);

    var step = new Array(3);

    step[0] = (end[0] - start[0]) / iterations;
    step[1] = (end[1] - start[1]) / iterations;
    step[2] = (end[2] - start[2]) / iterations;

    stepFade(elementId, start, step, end, iterations);
}

function stepFade(elementId, cur, step, end, iterationsLeft) {
    iterationsLeft--;

    document.getElementById(elementId).style.backgroundColor
        = "rgb(" + cur[0] + "," + cur[1] + "," + cur[2] + ")";

    cur[0] = Math.round(end[0] - step[0] * iterationsLeft);
    cur[1] = Math.round(end[1] - step[1] * iterationsLeft);
    cur[2] = Math.round(end[2] - step[2] * iterationsLeft);

    if (iterationsLeft > 1) {
        setTimeout(function() {
            stepFade(elementId, cur, step, end, iterationsLeft);
        }, 5);
    }
    else {
        document.getElementById(elementId).style.backgroundColor 
            = "rgb(" + end[0] + "," + end[1] + "," + end[2] + ")";
    }
}

It's used like this:

fadeBackground("myList", [98,180,232], [255,255,255], 1000);
Share Improve this question asked Jul 30, 2009 at 20:33 corecore 33.1k45 gold badges140 silver badges195 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 12

Here is an article from Google where the author discusses their work on timers for Gmail. They found that having a single high-frequency timer was faster than using multiple timers if they had heavy and rapid timer use.

You could have one timer that fires every 5ms, and add all of your elements that need to be faded to a data structure that tracks where they are in the fading process. Then your one timer can look through that list and perform the next fade for each element each time it is triggered.

On the other hand, have you tried using a library like Mootools or JQuery rather than rolling your own animation framework? Their developers have put a lot of work into optimizing these kinds of operations.

First of all your script doesn't take into account that minimal timeout is usually 10-15ms depending on a browser. You can see my post on this topic. Inside you'll find a table for popular browsers and a link to the program that measures it, so you can verify the claim yourself. I am sorry to say but iterations every 5ms is wishful thinking.

Secondly, timers are not interrupts. There is no magic in them — they cannot interrupt whatever is running in the browser and execute their payload. Instead, they will be deferred until the running code finishes and the browser gets back the control and the ability to run timers. Fading 50 elements take time, and I bet it is more than 5ms, especially if you take into account the whole deferred model of the browser: you update DOM, and the browser will update its visual representation … at some point in time.

I want to finish on a positive note:

  • Instead of fading out 50 individual elements, try to group them and fade their parent — it can be faster.
  • Be more creative at UI. Try to e up with a solution, which doesn't require fading out a lot of independent elements at once.
  • Always verify that your background assumptions are correct before designing around them.
  • If you can, try to target modern browsers. From my personal experience, Google Chrome is very good with timers, and its JavaScript engine (V8) is extremely fast.
发布评论

评论列表(0)

  1. 暂无评论