Question

我有简单的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超时并为其设置新的超时20000ms。

这是BubbleOn：

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

这是BubbleOff：

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

在函数BubbleOn和BubbleOff中起作用。它们只是隐藏或显示名为bubble的div，其中包含text1元素。当BOffi超时时，它只运行BubbleOff功能。这很好用。问题是，当运行BubbleOff并且鼠标立即放置在运行changeContent4（）的链接上时，它确实使得气泡div再次可见并再次将文本放在那里，但是气泡div会在一秒内淡出！不是在20000ms之后。在此之后如果再次放置鼠标以运行changeContent4（），一切都很好。如果在气泡淡出和将鼠标放在changeContent4（）启动器之间的时间比毫秒大约毫秒，则它可以工作并等待20000毫秒。不到一秒钟，气泡就显示出第二个......

这会导致什么？可能是fadeOut仍在运行，即使气泡从屏幕上消失，因此它不会重置BOffi计数器？可能还有1秒或更短的时间，然后在神奇的第二次之后再次运行BubbleOff？

Answer 1

尝试两个想法：

把“clearTimeout（BOffi）;”在“BubbleOn（）;”之前的函数顶部。
将BOffi声明为全局变量。

所以：

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

或者你可以改用window.BOffi。

Answer 2

乍一看，我注意到这个var BOffi = setTimeout（BubbleOff，20000）;.这会创建一个局部变量。执行该功能后，将丢失。第二次调用函数Boffi是一些随机残值。

让它全球化，你应该没问题（删除var）。

Answer 3

由于动画已排队，但您的脚本仍在运行，请尝试以下方法：

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;
    });
}

Fiddle here

您可能希望在fadeIn之前移动callback()调用，因为您正在修改气泡内的文本，但该例子只是为了让您看到每个更改的顺序

编辑：现在允许多次通话

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;
    });
}

FIDDLE

Answer 4

function BubbleOn() {
 $("#bubble").fadeIn(function(){},1000)
}
function BubbleOff() {
 $("#bubble").fadeOut(function() {},1000)
}

You should set duration for both fadeIn and fadeOut functions.

没有正确使用javascript setTimeout / clearTimeout？

4 个答案: