Question

我有一个链接的网站，应该打开一个Lightbox（第三方插件Magnific Popup / jquery）。操作网站上的内容后，我必须重新执行Lightbox插件的一些Javascript，以便将新链接识别为灯箱的链接。

function loadLightbox() {
    console.log("Lightbox start"); // for debugging
    $('a.img').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        image: {
            titleSrc: 'title_off',
            markup:
                '<div class="mfp-figure">' +
                '<div class="mfp-close"></div>' +
                '<div class="mfp-title"></div>' +
                '<div class="mfp-img"></div>' +
                '<div class="mfp-bottom-bar">' +
                '<div class="mfp-counter"></div>' +
                '</div>' +
                '</div>' // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button
        }
    });
    console.log("Lightbox end"); // for debugging
}

我有一个功能，它操纵页面changeSuggestion()上的内容。因为我希望每6个secondes更改一次内容，所以我使用setInterval函数。

setInterval(function () { changeSuggestion(); loadLightbox(); }, 6000);

我的问题是，它每6秒更改页面上的内容，但灯箱不起作用（尽管灯箱功能会产生输出）。但是当我将loadLightbox()函数复制到firefox控制台并执行它时，灯箱输入确实有效，直到它再次更改内容为止。所以我的问题是，通过setInterval执行和在Firefox javascript控制台中执行有什么区别？

修改 changeSuggestion：打开一个JSON文件，生成html格式的输出，该页面由$("#blogSuggestion").html(result)操纵

<!-- language: lang-js -->

function changeSuggestion() {
    $.getJSON("blog/blog.json", function (data) {
        var n = 0,
            showId,
            entry,
            result;
        $.each(data.blogentries, function (key, entry) {
            if (entry.id > n) {
                n = entry.id;
            }
        });
        showId = randomIntFromInterval(0, n - 1);
        if (data.blogentries[showId]) {
            entry = data.blogentries[showId];
            if (entry.type === "text") {
                result = "<a class=\"" + entry.type + "\" title=\"" + entry.title  + "\" href= \"#blogID" + entry.id + "\"><b>" + entry.title + "</b>";

            } else {
                result = "<a class=\"" + entry.type + "\" title=\"" + entry.title  + "\" href= \"" + entry.source + "\"><b>" + entry.title + "</b>";
            }
            if (entry.content) {
                result = result + "<br /><p>" + getExcerpt(entry.content, 20, '') + "</p><div id= \"blogID" + entry.id +  "\" class=\"blogLightbox mfp-hide\"><img  alt=\"" + entry.title + "\" src=\"" + entry.thumb + "\" ><div class=\"blogText\"><h3>" + entry.title + "</h3><p>" + entry.content + "</p></a></div></div>";
            } else {
                result = result + '<img  alt=\"' + entry.title + '\" src=\"' + entry.thumb + '\"></a>';
            }
            $("#blogSuggestion").html(result);
        } else {
            console.log("Nothing with ID: " + showId);
        }
    });

修改正如其在评论中所写，内容是异步更改的。如果我将asynchronously函数放入changeSuggestion的正文中就可以了！

在JS控制台中执行和作为脚本之间的区别

0 个答案: