setTimeout関数について調べたこと : JavaScript
setTimeout関数のメモ。
テキストを一文字ずつ表示する必要がありsetTimeout関数について調べたメモ。
timeoutID = window.setTimeout(func, delay[, param1, param2, …]);
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 < 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 < 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.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。