可以't使javascript文本效果在延迟的情况下正常工作

Can't get javascript text effect to work properly with delay

本文关键字：情况下 延迟 常工作 工作 文本 javascript 可以      更新时间：2023-09-26

我正在尝试制作一个随机文本效果，有点像电影《战争游戏》(Matthew Broderick(结尾的效果。这个想法是当用户悬停在单词中的一个字母上时，让单个字母随机变化。最终，在短时间后，字母最终会被"解码"，这意味着它最终会出现在正确的字母或数字上。我已经建立了基本的效果，但我正在努力设置计时器。我想在悬停事件和解码字符的实际显示之间创建一个小延迟。然而，当我添加一个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/

我真的很喜欢你的想法，我努力了。我成功了。

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

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

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

如何解决：

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

$(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'));

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

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

你有一个额外的"设置">

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

因此问题可能与计时器有关。每次调用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));             
     });
相关文章：