Snow-Materia > タイマーで expression() を停止する

前書き

いままで expression() を使ったいろいろな表現を紹介してきましたが、 expression() というやつは、 画面上で何らかの動きがあった場合に強制的にアクセスされて、 値を評価・更新するのですが、 (それが動的ってやつなんでしょうが) いかんせん、そのプロパティをどっかから上書きするまでは、 途中で expression() を停止するすることができません。

動的でなければならないものはともかく、 1回で終わるものを画面が表示されてる間中アクセスされれるのは、 なんか無駄っぽいし、メモリも食うだろうし、いらない気分。

また、expression() は、 後のCSSでプロパティを上書きすることで、 前のプロパティは参考されなくなる というCSSの特性をちゃんと持ってくれています。

そんなわけで、画面のロードが終わったときに、CSSのプロパティを上書きして、 その要素の expression() をストップさせちゃいましょう。

今回は、そのまま同じCSS内で、プロパティを操作する方法を紹介します。 JavaScriptのタイマー関数 setTimeout() を使います。

サンプル

• 「タイマーで expression() を停止する」のサンプル

ソースコード

/* stop-timer */
body {
    zoom: expression(
        this.style.zoom || (
            setTimeout(
                function () {
                    /* <style> (= style.owningElement)  */
                    if (!document.createStyleSheet) return;
                    var style = document.createStyleSheet();
                    with (style) {
                        media = 'screen, tv';
                        title = 'honyarara';
                        addRule('body', 'zoom: 1;');
                        addRule('q', 'zoom: 1;');
                    };
                }, 1000
            ),
            1
        )
    );
}
/* quotation on */
q {
    zoom: expression(
        this.style.zoom || (
            this.innerHTML = ' &quot; ' + this.innerHTML + ' &quot; ', 1
        )
    );
    white-space:normal;
}

備考

上書きしたい数(ストップしたいプロパティの数)だけ、 addRule('セレクター', 'プロパティ'); を増やしてください。

セレクターに書けるのは、ひとつだけです。 子孫セレクタなどはできるけど、カンマで区切った併記はできません。 たぶん、そういう仕様みたいですｗ あ、プロパティの併記は平気みたいです。(…)

title = 'honyarara'; は好きにつけてください。

}, 1000 というのは、1000ミリ秒後にタイマー発動、ということ。
短くしたり長くしたりはお任せですが、 当然、短すぎると expression() が働かないうちに止まることもあるでしょう(笑)

zoomのとこは別に何でもいいです。