ハイライト処理の続き

javascript

結構簡単に出来ると思ったハイライト処理もsetTimeout()かsetInterval()を使わないと随時実行できないと分かって理解するのに苦戦した。といっても多分半分以下くらいしか理解できてないかも。
多分その辺りを理解すればいろいろできる幅が広がるんだろうなぁ・・


例えば、ハイライトさせるためにfor文でループさせながら背景色を変化させる関数を実行しても、その関数が実行し終わるまでスタイルシートの値の変更が出来ないので、そのまま実行しても最終的な値でもって背景色が表示される結果となる。この「その関数が実行し終わるまでは画面が変更されないよ」ってのがやっかい。
そこでsetTimeout()やsetInterval()で指定時間後に関数を実行させる、という処理を繰り返し行うことで都度背景色の変化を画面に表示することができるということらしい。


で、前回id:amachangさんにもらったコメントも参考にしてこんな感じになりました。

  • highlight.js
function Highlight(id){
  startcolor = '#ffffa6';
  resultcolor = (document.getElementById(id).style.backgroundColor || '#ffffff');
  var val = HexaToDec(startcolor);
  var end = HexaToDec(resultcolor);
  var count = 255 - array_min(val);
  var degree = [(end[0] - val[0]) / count, (end[1] - val[1]) / count, (end[2] - val[2]) / count];

  var changeColor = function(){
    count--;
    document.getElementById(id).style.backgroundColor = 'rgb(' + val.join(',') + ')';
    val = array_plus(val, degree);
    if (count > 0) {
      sto = setTimeout(changeColor, 0);
    } else {
      document.getElementById(id).style.backgroundColor = 'rgb(' + end.join(',') + ')'; 
    }
  }
  sto = setTimeout(changeColor, 0);
}
function array_min(arr) {
	var a = (arr[0] > arr[1]) ? arr[1] : arr[0];
	a = (a > arr[2]) ? arr[2] : a; 
	return a;
}
function array_plus(arr1, arr2) {
  for(var i = 0; i < arr1.length; i++) {
    arr1[i] += arr2[i];
  }
  return arr1;
}
function HexaToDec(color) {
  var colors = [];
  colors.push(parseInt(color.substring(1,3), 16));
  colors.push(parseInt(color.substring(3,5), 16));
  colors.push(parseInt(color.substring(5,7), 16));
  return colors;
}

もっと上手くできないかなーってところはありますが、とりあえずそれっぽく動きました。
Highlight(id名)で使えます。
その他躓いたところといえば、setTimeOut()に指定する関数も引数があるとコンテキストオブジェクトの指定とか面倒でうーむ・・となったりとか。
と思ったけどapply使えばできるということに書いてて気づいた！


ともあれ、ただハイライトさせるだけならprototype.jsとscript.aculo.us(effect.js)をわざわざ使わなくても38行書けばできる！ってことが分かってよかった。
次は何やろうかな。