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; } ?>colors - How do I make an HTML element repaint within a Javascript loop? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>colors - How do I make an HTML element repaint within a Javascript loop? - Stack Overflow

    colors - How do I make an HTML element repaint within a Javascript loop? - Stack Overflow

    programmeradmin3浏览0评论

    I have some Javascript which "animates" a colour change on an HTML element, as follows:

    var element = document.getElementById("someid");
while (i < 255) {
    element.style.color = 'rgb(' + i + ',' + i + ',' + i + ')';
    i++;
    slowMeDown(); // This function runs for a few ms to slow the process down
}

    As you can see, this changes the color from black to white going through 255 shades of grey in between. I would like to make it visibly "fade" so that the user can see the text gradually disappear.

    However, the browser (Chrome and IE - not tested on Firefox yet) only refreshes at the end of the function, so the color simply changes from black to white. Does anyone know how to make the browser repaint during the loop so that I can see the text fade?

    I have some Javascript which "animates" a colour change on an HTML element, as follows:

    var element = document.getElementById("someid");
while (i < 255) {
    element.style.color = 'rgb(' + i + ',' + i + ',' + i + ')';
    i++;
    slowMeDown(); // This function runs for a few ms to slow the process down
}

    As you can see, this changes the color from black to white going through 255 shades of grey in between. I would like to make it visibly "fade" so that the user can see the text gradually disappear.

    However, the browser (Chrome and IE - not tested on Firefox yet) only refreshes at the end of the function, so the color simply changes from black to white. Does anyone know how to make the browser repaint during the loop so that I can see the text fade?

    • javascript
    • colors
    Share Improve this question asked Feb 25, 2009 at 1:07 Leigh CaldwellLeigh Caldwell 11.1k4 gold badges26 silver badges31 bronze badges
    Add a ment  | 

    4 Answers 4

    Reset to default 9 
    function changeColor()
{
    changeColorIncremental(0);
}

function changeColorIncremental(i)
{
    var element = document.getElementById("someid");

    element.style.color = 'rgb(' + i + ',' + i + ',' + i + ')';

    if (i < 255) {
        // Note the 50 millisecond wait below.  Decrease this to speed up
        // the transition, and increase it to slow it down.
        setTimeout('changeColorIncremental(' + (i + 1) + ')', 50);
    }
}

    You should look into JQuery. It will do all of this for you using the Effects functions or plugins.

    However in answer to the question:

    Normally web browsers only use a single UI update thread that is also used to execute Javascript code. Therefore the browser will execute your loop entirely and only then update the page once it is plete (ie all RGG = 255,255,255).

    Try using window.setTimeout or window.setInterval to call a function that increments the RGB values. This allows the browser UI update thread to update the display after each call (between the interval or timeout).

    (I believe all the major browsers operate this way including Firefox).

    Note: setInterval and setTimeout execute code on the single same UI thread. They simply add a timer callback to the window message loop and this gets called and executed at the correct time.

    Therefore, if other Javascript code or a UI update was executing at the time, the timer function must wait. So the function is not guaranteed to occur at exactly the time specified. Also (on Windows) the maximum resolution is much less then 1 millisecond, often about 1/20th of a second or about 50 milliseconds.

    Your slowMeDown() function is a bad way to delay things in Javascript. The reason is that JS implementations in browsers are single-threaded. This means only one task ever gets performed at a time. Often, the browser itself gets "frozen" waiting for JS to finish. This is what happens in your case - your loop never returns control to the browser in order to actually update the DOM element.

    Using setTimeout() or setInterval() as proposed by some of the others here, works around this by returning flow control to the browser and requesting it to call you back in a specified number of milliseconds.

    Also, if what you intend to do is trying to have the text fade, consider using the various ways to set CSS opacity (unfortunately given the state of browser support, you will have to set three different values on the style object).

    I'd use colourChangeTimer = setInterval(function() { //colour change code }, 100);

    Then after it's reached 255 on all values, use clearTimeout(colourChangeTimer).

    Excuse my Australian spelling.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论