忍者ブログ

Home > > グローバル変数を使わずにYFT

[PR]

  • 2017-03-30

Share on Tumblr このエントリーをはてなブックマークに追加

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference
[PR] from Born Neet

Home > > グローバル変数を使わずにYFT

Home > JavaScript > グローバル変数を使わずにYFT

グローバル変数を使わずにYFT

Share on Tumblr このエントリーをはてなブックマークに追加

Ajax等によって更新された部分を、一瞬だけ色を変えることでユーザに知らせるのが、Yeloow Fade Technique(YFT)。
昨日のエントリで紹介したAjaxテクニックブックにも載ってました。

bookmarkletterでも使っています。

ただあれは、タイマーと現在色保持のために2つもグローバル変数を消費しちゃってます。(+関数名で3つ。)
なので今日は、グローバル変数を使用せずに同じことを実現してみようと思います。

ということで、せっかく勉強したクロージャをバリバリ使ってやるぞ!と意気込んでたんですが…。

amachang - JavaScript 入門にずばり答えらしきものが載っちゃってた。
(※ 元記事にはもっとスマートな書き方がたくさん掲載されています。今回は上から2つ目の「構造化された場合」という項目を参考にしました。)

あれ、あっさり完成か?

黄色く!

ここのバックの色が変化します。

 

ソースはこれ。

document.getElementById("bnYellow").onclick = function() {

  var timer = setInterval(YFT, 50)
  var blue = 0;
  function YFT() {
   document.getElementById("bnYFTArea").style.backgroundColor = "#ff" + blue.toString(16);
   if(++blue > 16) clearInterval(timer);
  }
}

なんか意外と簡単にできてしまって拍子抜け。
連打してもちゃんとその回数分イベント起きてると思う。
まぁ元記事との違いはboxが動くか、色が変わるかだけだし、自力で書いたとはとても言えないけど。

実用的なものをサラッと書けるようになるにはまだまだ遠い。
JavaScript 第5版読みたいけど高いなぁ…)

追記(2008/9/21 21:50)

今さらミスに気づいた(>_<)
++blue > 16はダメでしょ…。
最後#ff10になっちゃう^^;

検証用ソース

(function() {

  var timer = setInterval(YFT, 50)
  var blue = 0;
  function YFT() {
   //document.getElementById("bnYFTArea").style.backgroundColor = "#ff" + blue.toString(16);
   console.log("#ff" + blue.toString(16));
   if(++blue > 16) clearInterval(timer);
  }
})();

結果

#ff0
#ff1
#ff2
#ff3
#ff4
#ff5
#ff6
#ff7
#ff8
#ff9
#ffa
#ffb
#ffc
#ffd
#ffe
#fff
#ff10 ← あちゃー!
PR

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
Listed below are links to weblogs that reference
グローバル変数を使わずにYFT from Born Neet

Home > JavaScript > グローバル変数を使わずにYFT

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top