jQuery setTimeout重置?

时间:2013-11-21 16:26:02

标签: javascript jquery html css

我有几个div在点击时显示不同的图像,然后在5秒后淡出。只有我希望每次单击div时都会重置此数字。下面是我尝试使用的代码,但它不起作用。

var showServicesDelay = function() {
            timeoutHandle = setTimeout(function () {
                    jQuery(".services-inner").css({"opacity": "0.5"});
                jQuery(".insignia-inner").css({"opacity": "1"});
                jQuery(".insignia-inner-text").css({"opacity": "1"});
                hideAll();
        }, 5000);       
    };

    var showMilitaryKit = function() {
        jQuery(".military-kit-inner").css({"opacity": "1"});

        clearTimeout(timeoutHandle);
};

var showProperty = function() {
        jQuery(".property-inner").css({"opacity": "1"});

        clearTimeout(timeoutHandle);    
};

var showHomeContents = function() {
        jQuery(".home-contents-inner").css({"opacity": "1"});

        clearTimeout(timeoutHandle);
};

// military kit
    jQuery(".military-kit-hover").click(function() {        
        hideAll();
        hideServices();
        showMilitaryKit();
        showServicesDelay();
    });

// property
    jQuery(".property-hover").click(function() {
        hideAll();
        hideServices();
        showProperty();
        showServicesDelay();
    }); 

// home contents
    jQuery(".home-contents-hover").click(function() {
        hideAll();
        hideServices();
        showHomeContents();
        showServicesDelay();
    }); 

1 个答案:

答案 0 :(得分:5)

在调用clearTimeout之前,您正在取消对setTimeout的句柄:

timeoutHandle = null;   
clearTimeout(timeoutHandle);

应该是:

clearTimeout(timeoutHandle);