setTimeout関数について調べたこと : JavaScript

Pocket

setTimeout関数のメモ。

テキストを一文字ずつ表示する必要がありsetTimeout関数について調べたメモ。

timeoutID = window.setTimeout(func, delay[, param1, param2, …]);

» window.setTimeout – MDN

IE7, 8は引数param1, param2, …を渡せない。コールバック関数をクロージャーにしプロパティを追加して解決。

» jsFiddle

テキストを一文字ずつ表示するJavaScript

/**
 * typo.js
 *
 * It displays one character at a time.
 *
 * Copyright 2012 Sawai Hiroshi
 * http://www.info-town.jp
 *
 */
/**
 * typographic object
 */
var typo = {};

// implement typo object
(function() {

<pre><code>/**
 * transform string to array
 *
 * @private
 * @param {String} text
 * @return {Array} arr
 */

function _strToArr(str) {
    var arr = [];
    for (i = 0; i &lt; str.length; i++) {
        arr.push(str.charAt(i));
    }
    return arr;
}

/**
 * insert text to dom
 *
 * callback of setTimeout
 *
 * @private
 * @param {jQuery} elem
 * @param {String} text
 * @param {Number} timer_id Timer ID
 */

function _insert(text, elem) {
    // argument elem, text is free variable
    return function _callback() {
        elem.innerHTML = text; // insert text
        clearTimeout(_callback.timer);
    };
}

/**
 * rendering text used timer
 *
 * @private
 * @param {Array} arr
 * @param {jQuery} elem
 */

function _rendering(text, elem) {
    var arr = _strToArr(text),
        timer = [],
        text,
        _timercallback,
        i;
    for (i = 0; i &lt; arr.length; i++) {
        text = arr.slice(0, i + 1).join('');
        _timercallback = _insert(text, elem);
        _timercallback.timer = setTimeout(_timercallback, i * 100);
    }
}
typo.rendering = _rendering;
</code></pre>

}());
var elem = document.getElementById('foo');
typo.rendering('It displays one character at a time', elem);
<html>
<body>

<p id="foo"></p>

</body>
</html>

» Demo

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。