问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

console log $选择器选中的元素内容 和 当前页面实际内容 存在差异, 好像log输出存在延迟 ?

头像
qingche
    105432

    image.png
    抖音web页面 为了选中上面的元素,使用 $("span.arnSiSbK.ypGAC_xH.ONzzdL2F")

    遇到的问题

    鼠标滚轮 滚动下一个/上一个视频. 控制台使用 $("span.arnSiSbK.ypGAC_xH.ONzzdL2F") 输出的名称和当前播放的视频的 用户名称不一致. 如下
    image.png

    Microsoftjavascripttypescript
    阅读 488
    avatarAI BotBETA

    回答

    这种情况通常是由于 JavaScript 和 DOM（文档对象模型）之间的异步更新导致的。在网页中，尤其是像抖音这样的动态内容丰富的网页，内容可能会在页面上的用户交互（如滚动、点击等）之后异步更新。当你使用 jQuery 的 $ 选择器在控制台中查询元素时，如果此时页面的内容已经由于用户的交互而更新，但 JavaScript 引擎尚未处理完这些更新事件，那么你的查询结果可能会反映更新之前的状态。

    解决方案：

    1. 确保 DOM 更新完成：
      在使用选择器之前，确保相关的 DOM 更新已经完成。这可以通过在事件处理函数的回调中使用选择器来实现，或者通过设置一个小的延时（使用 setTimeout）来等待 DOM 更新完成。

      setTimeout(() => {
    const userNameElement = $("span.arnSiSbK.ypGAC_xH.ONzzdL2F");
    console.log(userNameElement.text());
}, 100); // 延时100毫秒，根据实际情况调整

    2. 使用 MutationObserver：
      MutationObserver 是一个可以监视 DOM 树变动的接口，当 DOM 变动时，它可以异步执行一个回调函数。这可以用来监听特定元素的变动，并在变动发生时执行相应的操作。

      const observer = new MutationObserver((mutationsList, observer) => {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList' || mutation.type === 'attributes') {
            const userNameElement = $("span.arnSiSbK.ypGAC_xH.ONzzdL2F");
            console.log(userNameElement.text());
        }
    }
});

const targetNode = document.querySelector('父元素的选择器'); // 替换为实际父元素的选择器
observer.observe(targetNode, { childList: true, attributes: true });

// 记得在不再需要观察时调用 observer.disconnect()

    3. 在事件回调中查询：
      如果你知道哪个事件触发了 DOM 更新（例如滚动事件），可以在该事件的处理函数中进行查询。

      $(window).on('scroll', function() {
    setTimeout(() => {
        const userNameElement = $("span.arnSiSbK.ypGAC_xH.ONzzdL2F");
        console.log(userNameElement.text());
    }, 50); // 根据实际情况调整延时
});

    注意，由于网页可能使用了框架或库（如 React, Vue 等），DOM 的更新可能由这些框架管理，并且可能不会立即反映到底层的 DOM 树中。此外，类名如 arnSiSbK.ypGAC_xH.ONzzdL2F 看起来像是动态生成的，这些类名可能会随着页面或应用的更新而改变，因此使用更稳定的选择器（如数据属性或 ID）可能是一个更好的选择（如果可用）。

    1 个回答
    得票最新
    头像
    hfhan
      29k72241

      因为一个页面有很多的视频，不是只有当前窗口内的一个视频，所以你用选择器选择的都是第一个视频下的作者，看下他的dom结构，当前播放的视频带有属性data-e2e="feed-active-video"，可以使用选择器$("[data-e2e='feed-active-video'] span.arnSiSbK.ypGAC_xH.ONzzdL2F")进行输出
      image.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      被 1 篇内容引用
      推荐问题
      logo
      Microsoft
      子站问答
      访问
      宣传栏