Question

我有一个不断变化的元素#ChatStatus，当发生变化时，元素会在屏幕上滑动显示。

我现在要做的是：例如，如果在过去的5秒内没有对此元素进行任何更改，请将元素隐藏回屏幕之外。这是我的代码：

$('#ChatStatus').on("DOMSubtreeModified",function(){
    $('#ChatStatus').animate({'right':'30px'},500);
});

// Now I wanna run this, when the #ChatStatus is innactive, or no changes occurred
// $('#ChatStatus').animate({'right':'-200vw'},500);

这是我要实现此非活动功能的完整项目 https://jsfiddle.net/shuffledPixels/77hb2do0/1/

Answer 1

这是一种非常功能性的做法。正如你的评论者提到的那样，这并不是最好的做法;但如果你愿意，那就是你的代码。

shouldRemove = null;
$('#ChatStatus').on("DOMSubtreeModified",function(){
    clearTimeout(shouldRemove);
    $(this).animate({'right':'30px'},500);
    shouldRemove = setTimeout(function () {
        $(this).animate({'right':'-200vw'},500);
    }.bind(this), 5000);
});

Answer 2

我对JS动画等不太熟悉，所以我会留下任何关于风格和方法选择的问题。除此之外，我建议使用保持最后一次更改时间的全局变量，并定期轮询以查看该时间是否超过5秒。例如：

var lasttime = none
$('#ChatStatus').change(function () {
    lasttime = new Date().getTime() //Set lasttime to the time when the element changed
}
setInterval(function () {
    if ((new Date().getTime() - lasttime) > 5000) { //Date().getTime() is in miliseconds,
                                                    // so 5000 for five seconds 
        $('#ChatStatus').animate({'right':'-200vw'},500);
    }
}, 1000); // Set 1000 (1 second) lower for more precision at the
          // cost of more computational time

我希望这有帮助！

如果Element Hasn在最后一个＆＃39; X＆＃39;秒

2 个答案: