jquery - 如何防止 JQuery 效果重复？

Question

我有一个 jquery 效果，可以将特定图像延迟 5 秒然后滑入。但我希望当用户重新加载页面时，图像不会重复该效果。

这是我当前的代码：

 $(window).load(function () {

    setTimeout(function () {
        $("#alex").show("slide", {
            direction: "down"
        }, 1000);
    }, 3000);
});

Answer 1

您通过使用 cookie 来跟踪您是否已经在此浏览器中对该页面进行了效果。你可以这样做：

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}


// only schedule the effect if we haven't already done it
if (!readCookie("effect1")) {
    $(window).load(function () {
        // write a cookie so we don't do this again
        createCookie("effect1", "done");
        setTimeout(function () {
            $("#alex").show("slide", {
                direction: "down"
            }, 1000);
        }, 3000);
    });
} else {
    // just show it normally
    $(document).ready(function() {
        $("#alex").show();
    });
}