jQuery:用最短时间完成处理程序
jQuery: complete handler with minimum time
我有一个函数可以使用.load()
加载内容(但它可以使用任何内容)。有时内容加载太快,以至于我使用的过渡动画看起来不太好,事实上这很令人反感。我想在转换之间添加一个最短时间,这样,如果内容加载得很快,它仍然会等待最短时间(比如500毫秒)。
我的代码目前看起来是这样的,有没有一种很好的jQuery方法可以做到这一点?
$("body").on("click","a[href]",function (e) {
e.preventDefault();
var href = $(this).attr("href");
// Do pre load animation (removed for clarity)
$("#rightpanel").load($(this).attr("href"), function () {
// Do post load animation (removed for clarity)
History.pushState(null, null, href);
});
});
这里有一个涉及承诺的答案:
// suggestion 1
// wait for both pre-load animation and load to complete :
$.when(
$('.gizmo').slideUp(),
$("#rightpanel").load($(this).attr("href"))
).done(function(){
$('.gizmo').stop().slideDown();
History.pushState(null, null, href);
});
// suggestion 2
// add a "500ms promise" :
function delay(time) {
var dfd = $.Deferred();
setTimeout(function(){ dfd.resolve() }, time);
return dfd.promise();
}
$.when( delay(500), $("#rightpanel").load($(this).attr("href")) ).done(function(){
//post load stuff
});
这是一把小提琴。
正如Chris在评论中正确指出的那样,上面的代码将不适用于.load()
:.load()
应用于jQuery选择,并返回所选的集合,而不是底层的ajax promise。
如果使用$.ajax
、$.get
、$.post
或其他全局jQuery函数,则上述代码将起作用,
或者你可以创建一个额外的承诺:
var loadData = $.Deferred();
$('#rightpanel').load($(this).attr('href'), function(){ loadData.resolve() });
$.when( delay(500), loadData ).done( ... )
相关文章:
- keyup事件处理程序更改焦点不适用于快速键入
- 提示使用服务器端事件处理程序激活JavaScript
- 将事件处理程序绑定到任何可能的事件
- 正在将事件处理程序添加到不存在的类
- 在AJAX回调和呈现PIXIJS之间处理程序流时遇到了问题
- Adobe Edge:动画完成时添加onComplete处理程序
- 是否可以从输入处理程序中确定输入的类型
- 在循环中附加事件处理程序时出现浏览器性能问题
- 在同一个javascript事件处理程序中调用不同的函数
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 检查事件处理程序参数
- 实现延迟的jquery更改事件处理程序
- 平均值.on(事件[,选择器][,数据],处理程序)
- getSript在同一对象上多次添加处理程序
- 如何使用Node.js在JavaScript模块文件之间使用事件处理程序
- 如何让React JS点击处理程序在执行时更新DOM
- 如何使jQuery的“bind”或“on”事件处理程序幂等
- Backbone listenTo不将jquery函数作为处理程序进行激发
- 带有参数的Javascript事件处理程序
- Jquery事件处理程序仅适用于匿名函数