0

我对简单的 javascript 和一些 ajax 有疑问。

我有这样调用 javascript 函数的链接：

<div id="Button11" onmouseover="changeContent4()">Actions</div>

上面调用的 Javascript 函数是这样的：

function changeContent4()
{
    BubbleOn()
    document.getElementById("text1").innerHTML='Some text here';
    clearTimeout(BOffi);
    var BOffi = setTimeout(BubbleOff, 20000);
}

这有效，它运行 BubbleOn 函数，将文本放置到元素 text1，很可能它清空 BOffi 超时并为其设置新的超时 20000 毫秒。

这是泡泡：

function BubbleOn() {
 $("#bubble").fadeIn(function() {
    })
}

这是 BubbleOff：

function BubbleOff() {
 $("#bubble").fadeOut(function() {
    })
}

与 BubbleOn 和 BubbleOff 函数一样。他们只是隐藏或显示包含 text1 元素的名为 bubble 的 div。当 BOffi 超时时，它只运行 BubbleOff 函数。这工作正常。问题是，当 BubbleOff 运行并且鼠标立即放在运行 changeContent4() 的链接上时，它确实使气泡 div 再次可见并再次将文本放在那里，但随后气泡 div 在一秒钟内淡出！不是在 20000 毫秒之后。在此之后，如果再次放置鼠标以运行 changeContent4() 一切正常。如果气泡淡出和将鼠标放在 changeContent4() 启动器上之间的时间超过一秒，它会工作并等待 20000 毫秒。不到一秒，气泡大约显示第二...

什么会导致这种情况？即使气泡从屏幕上消失，fadeOut 是否仍在运行，因此它不会重置 BOffi 计数器？哪个可能只剩下 1 秒或更短的时间，然后在那神奇的一秒后再次运行 BubbleOff？

4

4 回答 4

1

尝试两个想法：

  1. 把“清除超时（BOffi）；” 在“BubbleOn();”之前的函数顶部。

  2. 将 BOffi 声明为全局变量。

所以：

var BOffi;
function changeContent4()
{
  clearTimeout(BOffi);
  BubbleOn();
  document.getElementById("text1").innerHTML='Some text here';
  BOffi = setTimeout(BubbleOff, 20000);
}

或者您可以改用 window.BOffi。

于 2013-08-19T12:20:06.033 回答
0

乍一看，我注意到这个 var BOffi = setTimeout(BubbleOff, 20000);。这将创建一个局部变量。函数执行后，丢失。第二次函数称为 Boffi 是一些随机残值。

让它成为全球性的，你应该没问题（删除var）。

于 2013-08-19T12:07:04.970 回答
0

因为动画已排队，但您的脚本仍在运行，请尝试以下操作：

function changeContent4()
{
    bubble(function(){
        document.getElementById("text1").innerHTML='Some text here';
    });
}
var fadeTimeout = null;
function bubble(callback) {
    if(fadeTimeout==null)
        $("#bubble").fadeIn(1000, function(){
            if($.isFunction(callback))
                callback();
            fadeTimeout = setTimeout(bubbleOff, 20000);
        });
}

function bubbleOff() {
    $("#bubble").fadeOut(1000, function(){
        fadeTimeout =null;
    });
}

在这里提琴

当您修改气泡内的文本时，您可能想callback()在 fadeIn 之前移动呼叫，但该示例只是为了让您查看每个更改的顺序

编辑：现在允许多次通话

var i = 0;

function changeContent4() {
    bubble(function () {
        $("#text1").text('Some text here ' + (i++));
    });
}

var fadeTimeout = null;

function bubble(callback) {
    if ($.isFunction(callback)) callback();

    if (fadeTimeout == null) {
        $("#bubble").fadeIn(1000, function () {
            fadeTimeout = setTimeout(bubbleOff, 20000);
        });
    } else {
        clearTimeout(fadeTimeout);
        fadeTimeout = setTimeout(bubbleOff, 20000);
    }
}

function bubbleOff() {
    $("#bubble").fadeOut(1000, function () {
        fadeTimeout = null;
    });
}

小提琴

于 2013-08-19T12:13:22.127 回答
0 
function BubbleOn() {
 $("#bubble").fadeIn(function(){},1000)
}
function BubbleOff() {
 $("#bubble").fadeOut(function() {},1000)
}

You should set duration for both fadeIn and fadeOut functions.
于 2013-08-19T12:13:44.700 回答