2

映画「War Games」(Matthew Broderick) の最後にあるような、ランダムなテキスト効果を作ろうとしています。アイデアは、ユーザーが単語内の文字の 1 つにカーソルを合わせるたびに、個々の文字がランダムに変化するようにすることです。最終的に、文字は「デコード」されて、正しい文字または数字になることを意味します。基本的なエフェクトを作成しましたが、苦労しているのはタイマーの設定です。ホバー アウト イベントとデコードされた文字の実際の表示との間にわずかな遅延を作成したいと考えています。ただし、settimeout を追加すると。スクリプトが壊れて、タイマーがスタックしているように見えます。何が間違っているのかわかりません。以下は私がこれまでに得たコードです..どんな助けも素晴らしいでしょう.

function setDecodedChar(object){
    var decodedMessage = "HELLO WORLD";
    var index = object.attr('class').substring(4);
    console.log(index);
    object.html(decodedMessage[index]);


}

function changeChar(object){
    var randomchar = getrandomChar();
    object.html(randomchar);
}

function getrandomChar(){
    var char = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    char = possible.charAt(Math.floor(Math.random() * possible.length));
    return char;
}

$(function() {
    typesetting.letters('.title-text');

    var target = $(".title-text").children();
    console.log(target);

    var timer;
    var gate = true; 
    $(target).hover(function(){
            var charChar = $(this);
            //on hover-over
            if(gate){
                gate = false;
                timer=setInterval(function(){
                    changeChar(charChar);
                },100);
            }
        },function(){
            //on hover-out
            setTimeout(function(){ //<-- breaks here
                                clearInterval(timer) 
                setDecodedChar($(this));
                            },1000);
            gate = true;
        }
    );

});

これは、現在機能している効果のjsfiddleです。 http://jsfiddle.net/thesnooker/htsS3/

4

3 に答える 3

2 
setsetTimeout(function(){ //<-- breaks here
                            clearInterval(timer) 
            setDecodedChar($(this));
                        },1000);

追加の「セット」があります

setTimeout(function(){ //<-- breaks here
                            clearInterval(timer) 
            setDecodedChar($(this));
                        },1000);
于 2013-05-08T20:18:03.917 に答える
1

したがって、問題はタイマーに関連している可能性があります。setInterval が呼び出されるたびに変更されます。ホバーオブジェクトに間隔を保存する場合は、保存された参照を使用してクリアします。

ちなみにクールなコンセプト。

$(function () {
     var target = $(".text").children();
     var timer;

     $(target).hover(function () {
         var charChar = $(this);

         if($(this).data("timer") == void(0)) {
             if($(this).data("timeout") != void(0)) {
                 clearTimeout($(this).data("timeout"));
             }

             $(this).data("timer", setInterval(function () {
                 changeChar(charChar);
             }, 100));
         }
     }, function () {
         //on hover-out
         var timerObject = $(this);
         timerObject.data("timeout", setTimeout(function() {
             clearInterval(timerObject.data("timer")); 
             setDecodedChar(timerObject); 
             timerObject.removeData("timer");
         }, 1000));             
     });
于 2013-05-08T20:19:41.957 に答える