TopJavaScript > 2012年8月
2012年8月22日

JavaScriptのsetTimeout()のまとめ

August 22,2012 1:55 AM
Tag:[]
Permalink

JavaScriptのsetTimeout()の使い方についてまとめてみました。

setTimeout()

まとめているのは基本的なことのみですので、さらに詳しい内容については参考記事等を参照願います。

認識誤りがありましたらどこかでつぶやいてください。

1.setTimeout()の機能は?

タイムアウトした時点で、パラメータに指定した処理を1度だけ実行させるための関数です。

2.setTimeout()のパラメータは?

第1パラメータに起動したい処理または関数、第2パラメータにタイムアウト時間(=第1パラメータで指定した関数または処理を起動させるまでの待ち時間)をミリ秒で指定します。

setTimeout( 起動したい処理または関数, タイムアウト時間 );

3.setTimeout()の返却値は?

タイマーIDが返却されます。タイマーIDは単なる整数です。

var timer_id = setTimeout( 起動関数, タイムアウト時間 );

1度だけ実行する場合、タイマーIDを使うことはありませんが、後述する繰り返し実行を止めるときに、このタイマーIDが必要になります。

4.具体的なコードは?

サンプルを作ってみました。

次のコードは、3000ミリ秒(3秒)後にfoo()を1度だけ起動します。

var foo = function(){
    alert("OK");
};
setTimeout( "foo()", 3000 );

関数の部分は「function(){}」で括ることもできます。

var foo = function(){
    alert("OK");
};
setTimeout( function(){ foo() }, 3000 );

onclickイベントなどにも記述できます。

<input type="button" value="send"  onclick="setTimeout('foo()', 3000)">

5.setTimeout()を繰り返し実行するには?

関数の中でsetTimeout()を起動し、第1パラメータに自関数を記述します。

次の例は、3秒周期で繰り返しfoo()を起動します。

var foo = function(){
    setTimeout( "foo()", 3000 );
};
foo();

setTimeout()の前後にコードを記述した場合、どちらもすぐに実行されます。

なお、IE系ではエラーになるという情報があったので、次のようにwindow.onloadイベントで起動させた方がいいかもしれません(拾ってきた情報が古いかもしれません)。

var foo = function(){
    setTimeout( "foo()", 3000 );
};
window.onload = foo;

window.onloadイベントの代わりにjQueryでもいいと思います。

var foo = function(){
    setTimeout( "foo()", 3000 );
};
$(function(){
    foo();
});

6.繰り返し処理を止めるには?

止めたい時点でclearTimeout()を起動します。パラメータには2項に登場したタイマーIDを指定します。

clearTimeout( タイマーID );

止め方はいろいろあると思いますが、たとえば次のようにします。

var timer_id;
var counter = 0;
var foo = function(){
    counter++;
    timer_id = setTimeout( "foo()", 3000 );
    if ( counter > 5 ) {
        clearTimeout( timer_id );
    }
};
foo();

ちなみにタイマーIDはsetTimeout()が起動されるたびに値が変わるようです。

7.タイムアウト時間は厳密か?

厳密ではないようです。詳細は下記の記事が参考になると思います。

JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 - IT戦記

8.setTimeout()とsetInterval()の違いは?

setTimeout()の第2パラメータには起動するまでの待機時間を指定しますが、setInterval()の第2パラメータには起動間隔を指定します。

よって、setInterval()は他の処理とは無関係に、周期的に起動されます。

Comments [0] | Trackbacks [0]
2012年8月10日

JavaScriptの文字列置換とjQueryのDOM要素置換のまとめ

August 10,2012 2:34 AM
Tag:[, ]
Permalink

JavaScriptの文字列置換とjQueryのDOM要素置換について、まとめて紹介します。

特にJavaScriptの文字列置換はいつもやり方を忘れてしまうので、このエントリーに保存しておきます。

1.replace()による文字列置換

基本的な文字列置換は、JavaScriptのreplace()メソッドを利用します。

var text = "foofoo";
var result = text.replace('foo', 'bar');

実行結果(resultの内容)

barfoo

2.replace()の正規表現による置換

replace()メソッドの第1パラメータに正規表現を指定すれば、さらに強力な文字列置換が行えます。

var text = "foofoo";
var result = text.replace(/foo/g, 'bar');

実行結果(resultの内容)

barbar

後方参照やグループ化なども可能です。

<script>
var text = "abcfooabc";
var result = text.replace(/^(.*)foo(.*)$/, '$1$2');
</script>

実行結果(resultの内容)

abcabc

3.jQueryのreplaceWith()によるDOM要素置換1

jQueryのreplaceWith()メソッドを使えば、例えば次のようなDOM要素の置換が行えます。

<div>foo</div>
<script>
$(function(){
    $('div').replaceWith('<div>bar</div>');
});
</script>

実行後のHTMLマークアップ

<div>bar</div>

4.jQueryのreplaceWith()によるDOM要素置換2

replaceWith()メソッドのパラメータに関数を定義すれば、次のようなDOM要素の置換が行えます。

<div class="container">
  <div class="inner">foo</div>
  <div class="inner">bar</div>
</div>
<script>
$(function(){
    $("div.container").replaceWith(function() {
        return $(this).contents();
    });
});
</script>

実行後のHTMLマークアップ

<div class="inner">foo</div>
<div class="inner">bar</div>

5.jQueryのreplaceAll()によるDOM要素置換

replaceAll()メソッドは、replaceWith()メソッドと逆の指定を行います。replaceAll()メソッドのパラメータにターゲットの要素やclass属性を指定し、置換する内容を先頭に記述します。

<div>foo</div>
<script>
$(function(){
    $('<div>bar</div>').replaceAll('div');
});
</script>

実行後のHTMLマークアップ

<div>bar</div>

次のように記述すれば、class属性値「third」のマークアップを、class属性値「first」のマークアップに置き換え、class属性値「first」の元のマークアップは消去されます。

<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">Goodbye</div>
<script>
$(function(){
    $('.first').replaceAll('.third');
});
</script>

実行後のHTMLマークアップ

<div class="second">And</div>
<div class="first">Hello</div>

6.参考サイト

参考サイトは下記です。ありがとうございました。

Comments [0] | Trackbacks [0]
2012年8月 2日

jQuery.ajaxメソッドのdataオプションに設定する変数がundefinedの場合の動作について

August 2,2012 3:33 AM
Tag:[, ]
Permalink

jQueryのajaxメソッドでdataオプションに設定する変数がundefinedの場合の動作について調べてみました。

動作というのは、POSTデータ・GETデータのことです。

1.dataオプションにJSON(または連想配列)を利用した場合

jQueryのajaxメソッドでdataに設定する変数の値にJSONや連想配列(ハッシュ)などを利用すれば、undefinedの変数についてはPOSTデータやGETデータとして渡されません。

サンプルソース

<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    $('#send').click(function(){
        var param = {
            "foo": $('#foo').val(),
            "bar": $('#bar').val(), // undefined
        };
        $.ajax({
            url: 'http://localhost/index.cgi',
            type: "POST",
            data: param,
            success: function() {},
            error: function() {}
        });
    });
});
</script>
<input type="text" id="foo" value="" />
<input type="button" id="send" value="send" />

JSONや連想配列(ハッシュ)などを利用すれば、POSTデータには「foo=xxx(フォームに入力した値)」だけが設定され、undefinedの変数barは除外されます。

実行結果
実行結果

サンプルはPOSTメソッドで行いましたが、GETメソッドでも同じ結果になりました。

2.dataオプションにFormData()を利用した場合のPOSTデータ

サンプルソース

<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
    $('#send').click(function(){
        var param = new FormData();
        param.append("foo", $('#foo').val());
        param.append("bar", $('#bar').val()); // undefined
        $.ajax({
            url: 'http://localhost/index.cgi',
            type: "POST",
            data: param,
            processData: false,
            success: function() {},
            error: function() {}
        });
    });
});
</script>
<input type="text" id="foo" value="" />
<input type="button" id="send" value="send" />

FormData()を利用すると、POSTデータにはundefinedの変数barも設定されました。これは空のフォームデータを送信したときと同じように見えるようです。

実行結果
実行結果

3.調査のきっかけ

当初、FormData()を利用してjQuery.ajaxメソッドのdataオプションに設定していたのですが、値がundefinedの変数についてPOSTデータとして送信したくない必要が生じたため、調べ始めたのがきっかけです。

サンプルソースでは、変数barの値「jQuery('#bar').val()」に対応するinput要素はコード上に現れないため、意味不明に思われるかもしれませんが、やりたいことは項目の表示・非表示が動的に行えるフォームデータで、非表示にした項目を送信データの対象外にしたいというものです。

4.関連サイト

JavaScriptのundefinedについては以下のページに詳しく書かれています。

連載:Ajax時代のJavaScriptプログラミング再入門 - 第4回 JavaScriptでオブジェクト指向プログラミング
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3