Question

我上课了：

<ul class="topStatsWrapper">
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
</ul>

这个ul类每3秒更新一次。当ul类中的鼠标时，如何停止更新？当鼠标从.topStatsWrapper离开，然后再次启动settimeout。感谢。

initialize: function() {
    window.setTimeout( _.bind( this.updateStats, this, true ), 3 * 1000);
},

完整代码http://pastebin.com/nGnfaeN5

Answer 1

不太确定我们是否有足够的信息在这里传播正确的答案。首先，我会将你的setTimeout声明为一个变量，我可以通过鼠标清除你的类。

var timer; // set this globally

// this is from within your function
initialize: function() {
    timer = setTimeout( _.bind( this.updateStats, this, true ), 3 * 1000);
},

然后使用事件

$(document).on("mouseover", ".myclass", function(){
    timer.clearTimeout();
});

所以请改用setInterval：

var timer; // set this globally

// this is from within your function
initialize: function() {
    timer = setInterval( function(){ ... your code ... }, 3000);
},

然后使用事件

$(document).on("mouseover", ".myclass", function(){
    timer.clearInterval();
});

Answer 2

将您的updateStats功能更改为此...

updateStats: function() {

    if (window._noUpdate === true) return;

    var that = this, update;
    this.showLoading( true );

    update = $.when( update,
        that.ajax( 'getTopics', null, '.newestThreads' ),
        that.ajax( 'getPosts', {limit: JSON.stringify([0, 3])}, '.newestPosts' )
    );

    update.done( function() {
        that.showLoading();
        window.setTimeout( _.bind( that.updateStats, that, true), that.interval * 1000);
    });

}

并将您的initialize功能更改为此...

initialize: function() {
    this.interval = parseInt($('.topStatsWrapper').attr('data-topstats-interval'));
    window.setTimeout( _.bind( this.updateStats, this, true ), 3 * 1000);
    $("body").on("hover", ".topStatsWrapper",
        function() {
            window._noUpdate = true;
        },
        function() {
            window._noUpdate = false;
        }
    });
},

这将设置一个全局变量（_noUpdate），表示您的光标是否悬停在ul上。如果它设置为true，那么更新功能将直接退出而不做任何事情。

鼠标在div上时jQuery停止超时

2 个答案: