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 ← あちゃー！