js异步事件同步执行案例

改行不做程序员了

已于 2022-05-19 18:17:56 修改

阅读量617

点赞数

分类专栏： js 文章标签：模拟点击数据收集 JavaScript 网页抓取异步函数

于 2022-05-19 18:14:49 首次发布

本文链接：https://blog.csdn.net/qq_24986271/article/details/124868245

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

要做一个什么事呢？简单说就是模拟点击获得数据

在这里插入图片描述
如图，要收集页面上的文章的url，标题，日期三样内容组成一个表格绘制到页面上，

标题和日期可以直接获得页面的dom，用for循环填充到一个HTML字符串中，这里的问题是url的值需要点击分享按钮，在弹窗的复制链接下才有，这篇文章的url，
如果直接for 循环中模拟点击，会找不到弹窗的url值，如下：
在这里插入图片描述
猜测是点击事件后，弹窗的url值还没更新，所以需要点击后等待一会儿，让其他代码更新弹窗的url值，
然后在收集弹窗的url ，就可以将用异步事件同步事件来实现，流程是：
一个分享，等50毫秒，再收集，拼接到字符串，然后点击第二分享，再收集url
代码如下：

//模拟点击事件
      var e = document.createEvent("MouseEvents");
      e.initEvent("click", true, true);

      // 所有关闭按钮
      let allClosee = document.querySelectorAll(
        ".mp-dialog__wrapper .mp-dialog .mp-dialog__headerbtn"
      );

      // 所有分享按钮
      let allbutn = document.querySelectorAll(".mp-card .share");
      
      // 要循环的每一篇文章

      let ItemTr = document.querySelectorAll(".mp-card.is-always-shadow");
      // 装结果的表格
      let table = document.createElement("table"); // 表格
      // 结果表格插入的地方
      let div_TopImage = document.getElementsByTagName("body")[0]; // 插入的地方
      
      // 表头的HTML
      let tr = `<tr><td style=" border: 1px solid #999; padding: 0.2em;">url</td> <td style=" border: 1px solid #999; padding: 0.2em;">
  标题</td> <td style=" border: 1px solid #999; padding: 0.2em;">
     ${ItemTr.length}</td></tr>`;
     // 表格添加属性
      table.setAttribute("border", "0");
      table.setAttribute("cellpadding", "0");
      table.setAttribute("cellspacing", "0");
      table.style.margin = "30px auto";

      // 用异步函数实现
      async function getURL() {

        for (let i = 0; i < ItemTr.length; i++) {

          let url = await new Promise((resolve, reject) => {
            // 模拟点击按钮 打开窗口
            allbutn[i].dispatchEvent(e);
            
            // 等50秒后在获取数据，其他js
            setTimeout(() => {
              let url = document
                .querySelector(".btns .copy")
                .getAttribute("data-clipboard-text");
              // console.log("值是", url);
              if (url) {
                resolve(url);
              } else {
                reject("没有");
              }
            }, 50);
          });
        
          // 填充数据 拼接到表格
          tr += `<tr><td style=" border: 1px solid #999; padding: 0.2em;"> ${url}</td> <td style=" border: 1px solid #999; padding: 0.2em;">
    ${ItemTr[i]
      .querySelector(".title.skeleton")
      .innerText.trim()}</td> <td style=" border: 1px solid #999; padding: 0.2em;">
    ${ItemTr[i].querySelector(".time.skeleton").innerText}</td></tr>`;
        }
        // 完成所有数据
        // 打印表格
        table.innerHTML = tr;
        div_TopImage.appendChild(table);
        // 关闭所有窗口
        for (let i = 0; i < allClosee.length; i++) {
          allClosee[i].dispatchEvent(e);
        }
      }
      // 开始执行
      getURL();