未正确使用javascript setTimeout/clearTimeout

Not using correctly javascript setTimeout / clearTimeout?

本文关键字：setTimeout clearTimeout javascript      更新时间：2023-09-26

我对简单的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（）的链接上时，它确实会使bubblediv再次可见，并将文本再次放在那里，但随后bubbledivs会在一秒钟内消失！20000ms之后不会。之后，如果再次放置鼠标来运行changeContent4（），一切都会很好。如果气泡淡出和将鼠标放在changeContent4（）启动器上之间的时间大约比一秒长毫秒，它就会工作并等待20000ms。不到一秒钟，气泡显示为大约一秒钟。。。

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

两个尝试的想法：

  1. 将"clearTimeout（BOffi）；"放在函数顶部的"BubbleOn（）；"之前。

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

因此：

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

或者您可以使用window。取而代之的是博菲。

乍一看，我注意到这个var BOffi=setTimeout（BubbleOff，20000）；。这将创建一个局部变量。功能执行后，将丢失。第二个时间函数称为Boffi，是一些随机残差值。

让它成为全局的，你应该是好的（删除var）。

function BubbleOn() {
 $("#bubble").fadeIn(function(){},1000)
}
function BubbleOff() {
 $("#bubble").fadeOut(function() {},1000)
}
You should set duration for both fadeIn and fadeOut functions.

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

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

FIDDLE

相关文章：