jQuery中的延迟跟踪链路

Question

因为我想在用户单击链接时显示一个简短的动画，所以我希望在重定向之前确保动画是完整的。要做到这一点，我想我可以设置一个简单的时间来跟踪链接，如下所示：

$("a[href^='http://'], a[href^='https://']").click(function(e) {
    setTimeout(function() {
        window.location.href = $(this).attr("href");
    }, 1200);
    console.log($(this).attr("href"));
    e.preventDefault();
});

显然不是，虽然我不明白为什么。console.log没有被调用，但是我很确定我的选择器是正确的。我在这里错过了什么？

小提琴。

Answer 1

它看起来像jQuery边缘中load方法中的一个bug，如果您看到下面的代码它正在调用off = url.indexOf(" ")，但是当$(window).load(function(){})时，url的值是一个不具有indexOf属性的函数。

jQuery.fn.load = function( url, params, callback ) {
    if ( typeof url !== "string" && _load ) {
        return _load.apply( this, arguments );
    }

    var selector, type, response,
        self = this,
        off = url.indexOf(" ");

    if ( off > -1 ) {
        selector = jQuery.trim( url.slice( off ) );
        url = url.slice( 0, off );
    }

    // If it's a function
    if ( jQuery.isFunction( params ) ) {

        // We assume that it's the callback
        callback = params;
        params = undefined;

    // Otherwise, build a param string
    } else if ( params && typeof params === "object" ) {
        type = "POST";
    }

在jsfiddle中，您可以看到类似于Uncaught TypeError: url.indexOf is not a function的错误。这是因为默认情况下，jQuery将脚本添加到dom就绪处理程序中。如果您将脚本位置更改为head/body，则使用dom准备处理程序，如下所示，它运行良好。

jQuery(function($){
    $("a[href^='http://'], a[href^='https://']").click(function(e) {
        setTimeout(function() {
            window.location.href = $(this).attr("href");
        }, 1200);
        console.log($(this).attr("href"));
        e.preventDefault();
    });
})

演示：小提琴