2

我正在尝试制作一种随机文本效果，有点像电影战争游戏（马修布罗德里克）结尾的那种效果。这个想法是当用户将鼠标悬停在单词中的一个字母上时，让单个字母随机变化。最终在很短的时间后，这封信最终会被“解码”，这意味着它最终会出现在正确的字母或数字上。我已经建立了基本效果，但我正在努力的部分是设置计时器。我想在悬停事件和解码字符的实际显示之间创建一个小的延迟。但是，当我添加 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 回答
2

我真的很喜欢你的想法，我一直在努力。我让它工作了。

首先，这里有一个小提琴：http: //jsfiddle.net/htsS3/2/

我必须说，我不知道它是否是最佳方式，但它仍然有效！

你的方法的问题是每个字符都有 1 个计时器，它们会覆盖自己，所以有些字母不会停止。

我如何解决它：

我在每个字母的数据中设置了计时器，如下所示：

$(this).data('timer', setInterval(function () {
    changeChar(charChar);
}, 100));

不是每个span人都有自己的计时器。

悬停时，我建议将 $(this) 引用保存到 `var 中，因为您在超时期间丢失了它。我也将超时保存到数据中，因此当您将其悬停时我可以停止它并且它仍在变化。现在看起来像这样：

var $this = $(this);
$this.data('timeout', setTimeout(function(){
    clearInterval($this.data('timer'));
    setDecodedChar($this);
},1000))

最后，在悬停时，我必须清除超时和间隔：

clearInterval($(this).data('timer'));
clearTimeout($(this).data('timeout'));

好吧，我发现很难用我自己的话来解释，所以好好看看代码并享受吧！

于 2013-05-08T20:36:55.920 回答
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 回答