如何使用javascript显示/隐藏加载控制盘

我的网站上有通过ajax加载新内容的按钮。当内容正在加载时，我做了一个div来放置一个加载轮。在ButtonClick函数中，我让它首先向div添加一个类，使加载轮出现，然后加载数据，然后删除加载轮类。这似乎不起作用。我根本看不到装载轮。我甚至试着在移除加载轮之前让js执行暂停一秒钟，但我仍然看不到它。有关工作示例，请参见JSFIDLE：

JS:

函数等待（毫秒）{
var start=new Date（）.getTime（）；
var结束=开始；
同时（结束<开始+毫秒）{
end=新日期（）.getTime（）；
}
}
函数show_loader（）{
$（“#装入器”）.addClass（“装入器”）；
event.preventDefault（）；
}
函数hide_loader（）{
$（“#装入器”）.removeClass（“装入器”）；
event.preventDefault（）；
}
如果（$（“.item按钮”）.length）{
$（“.item按钮”）。单击（函数（事件）{
show_loader（）；
//加载ajax数据
等待（1000）；
隐藏加载程序（）；
event.preventDefault（）；
});
}

我建议您使用

setTimeout

$(".item-button").click(function(event) {
    show_loader();
    //load the ajax data
    //wait(1000);
    setTimeout(hide_loader, 1000);
    //hide_loader();
    event.preventDefault();
});

下面是一个工作示例

函数show_loader（）{
$（“#装入器”）.addClass（“装入器”）；
//event.preventDefault（）；
}
函数hide_loader（）{
$（“#装入器”）.removeClass（“装入器”）；
//event.preventDefault（）；
}
如果（$（“.item按钮”）.length）{
$（“.item按钮”）。单击（函数（事件）{
show_loader（）；
//加载ajax数据
//等待（1000）；
设置超时（隐藏加载程序，1000）；
//隐藏加载程序（）；
event.preventDefault（）；
});
}

.loader{
位置：固定；顶部：0；
左侧：0；右侧：0；底部：0；
背景：rgba（255255,8）；
/*填充顶部：150px*/
填充顶部：20px；
z指数：99999；
}
.加载器组{
边框：16px实心#F3；/*浅灰色*/
边框顶部：16px实心#3498db；/*蓝色*/
边界半径：50%；
宽度：120px；
高度：120px；
动画：旋转2s线性无限；
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}

$(".item-button").click(function(event) {
    show_loader();
    //load the ajax data
    //wait(1000);
    setTimeout(hide_loader, 1000);
    //hide_loader();
    event.preventDefault();
});