Question

当用户对某些列表项执行鼠标悬停时，我正在使用Prototype.js加载html元素。我正在使用setTimeout（）仅在给定时间后鼠标仍在列表项上时才加载内容。当用户在同一列表项上执行mouseout时，我想使用clearTimeout。

clearTimeout（）没有清除我的超时。我很确定这是因为我对Prototype.js缺乏熟悉而隐藏了一个常见的变量范围问题

有人可以指出此代码中的缺陷或确定我需要添加什么来使clearTimeout（）函数正常工作吗？

document.observe( 'dom:loaded', function() {
var timeout;

$$('.nav-primary li.category').each( function( item ) {
    item.observe('mouseover', function(event) {
        event.stopPropagation();
        categoryId = event.currentTarget.id;
        getCategoryBlurb(categoryId);
        timeout = setTimeout( function() {
            showCategoryInfo(categoryData, categoryId);
        }, waitTime);
    });

    item.observe('mouseout', function(event) {
            event.stopPropagation();
            clearTimeout(timeout);
    });
    });
});

更新代码

$$('.nav-primary li.category').each( function( item ) {
    var timeout = null;

    item.observe('mouseover', function(event) {
        event.stopPropagation();
        categoryId = event.currentTarget.id;
        getCategoryBlurb(categoryId);
        if( timeout === null ) {
            timeout = setTimeout( function() {
                showCategoryInfo(categoryData, categoryId);
            }, waitTime);
        }
        console.log(timeout);
    });

    item.observe('mouseout', function(event) {
            if( timeout !== null ) {
                console.log(timeout);
                clearTimeout(timeout);
                timeout = null;
            }
    });

});

Answer 1

在设置之前清除超时

if (timeout) { clearTimeout(timeout); }
timeout = setTimeout( function() { /* code here */ });

Prototype.js如何修复clearTimeout（）的使用

1 个答案: