Question

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

Answer 1

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

你有一个额外的'设置'

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

Answer 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'));

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

Answer 3

所以问题可能与计时器有关。每次调用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));             
     });

无法使javascript文本效果与延迟正常工作

3 个答案: