Javascript JS-如果某件事情比x花费的时间更长，那么就做一些事情

如果某个操作（数据加载）花费的时间超过某个特定时间，是否可以执行某些操作

例如，您的页面上有一些加载可视元素，以防数据加载比正常情况花费更多的时间。99%的装载是即时的，所以这个元素只是闪烁，这是一种刺激

是否可以执行以下操作：如果加载时间超过1秒=>ShowLoader

---

谢谢你

是的，通过一个范围足够大的变量和一个超时的组合

一些伪代码可以说明这一点：

var showLoader = true;

myAjaxCall({
    'onSuccess': function() {
        showLoader = false;
    }
});

window.setTimeout(function() {
    if(showLoader) {
        // Show loader here
    }
}, 1000); // 1000 milliseconds = 1 second

---

需要注意的是，这假设您的ajax是异步的。

这里需要两个可配置的输入，即显示加载程序之前的等待时间（延迟），以及加载程序避免任何闪烁的最短持续时间

如果您将延迟设置为1s，但数据在1.1s后到达，那么您将仅显示加载程序100ms，因此您将获得一个闪存，因此mimimum持续时间也很重要

下面是一个使用

setTimeout

的示例实现。您可以配置

delay

和

minDuration

以获得所需的行为

必须调用

loadingAnimation（）

函数才能启动动画过程。它返回一个

stopAnimation（）

函数，异步操作完成后必须调用该函数。这里，伪异步函数将此

stopAnimation（）

函数作为参数，在

setTimeout

中调用它

const loader=document.querySelector（'#loader'）；
const status=document.querySelector（“#status”）；
const hideLoader=（）=>loader.style.display='none'；
const showLoader=（）=>loader.style.display='block'；
功能加载动态（延迟=500，持续时间=1000）{
让MindurationOne=false；
设asyncActionDone=false；
设置超时（（）=>{
如果（！asyncActionDone）{
showLoader（）；
设置超时（（）=>{
MindurationOne=正确；
如果（asyncActionDone）{
hideLoader（）；
}
}，思维定势）；
}
}，延误）；
常量停止动画=（）=>{
asyncActionDone=true；
如果（MindurationOne）{
hideLoader（）；
}
};
返回停止动画；
}
函数fakeAsyncAction（doneCallback，delay）{
status.innerHTML='Started'；
设置超时（（）=>{
status.innerHTML='Done'；
doneCallback（）；
}，延误）；
}
功能触发器（延迟）{
const stopAnimation=loadingAnimation（）；
fakeAsyncAction（停止动画、延迟）；
}
hideLoader（）
按钮{
显示：块；
边缘底部：10px；
}
#装载机{
边框：5px实心#eee；
边框顶部：5px实心#3ad；
边界半径：50%；
宽度：30px；
高度：30px；
动画：旋转1s线性无限；
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
触发超短异步动作（300ms）
触发短异步动作（700ms）
触发长异步动作（1500ms）
异步操作状态：

是的，有可能。是的，。加载通常是（应该是）异步的。所以，只要设置一个计时器，如果在设定的时间内没有返回某些内容，它就会触发。