时间戳

首页 > 解决方案 > JS 函数只在浏览器控制台上工作

javascript - JS 函数只在浏览器控制台上工作

问题描述

我有以下功能。

function loadSplides() {
    let elms = document.querySelectorAll('.splide');
    console.log("document.querySelectorAll('.splide') JS COMMAND")
    console.log(elms)
    for ( let i = 0; i < elms.length; i++ ) {
        console.log('loop')
        console.log("LOOP", i)
        new Splide( elms[i], {
            type: 'loop',
            fixedHeight: '20rem',
            cover: true,
        } ).mount();
    }
}


$(document).ready(() => {
    $('#index').remove()

    const sponsors = async () => {requestSponsors()}
    sponsors().then(() => {loadSplides()})
})

返回一个空数组，但是当elms我在浏览器控制台上执行相同的命令document.querySelectorAll('.splide');时，返回的是一个包含 5 个元素的数组

在此处输入图像描述

标签： javascript

解决方案

这些元素似乎是动态加载的。可能由requestSponsors()? 如果是这种情况，那么您将需要等待该操作。 假设它返回 aPromise，目前它的结果Promise正在丢失。您可以await直接在您的async函数中使用它：

const sponsors = async () => {await requestSponsors()}

Promise或者通过删除花括号返回函数的结果：

const sponsors = async () => requestSponsors()

或通过显式返回：

const sponsors = async () => {return requestSponsors()}

如果requestSponsors() 不返回 aPromise那么您需要检查并可能修改它以查看其异步操作（加载这些元素，可能来自 AJAX 操作？）可以等待。

推荐阅读