js实现百度广告异步插入

class IntersectionHandler {
        constructor() {
            // 绑定 this，确保在回调函数中使用正确的上下文
            this.handleIntersection = this.handleIntersection.bind(this);
            // 创建 IntersectionObserver 实例，指定回调函数和阈值
            this.observer = new IntersectionObserver(this.handleIntersection, { threshold: 0.5 });
        }

        /**
         * 顺序执行逻辑
         * @param {Array} elements - 元素数组
         */
        executeSequentially(elements) {
            // 遍历元素数组
            elements.forEach(({ selector = '', arr = '', index = 1 }) => {
                // 查找目标元素
                const target = document.getElementById(selector);
                if (target) {
                    // 设置目标元素的数据集属性，用于后续处理
                    this.setDatasetAttributes(target, { selector, arr, index });
                    // 监听目标元素的可见性变化
                    this.observer.observe(target);
                }
            });
        }

        /**
         * 创建 HTML 元素
         * @param {HTMLElement} dom - 目标元素
         * @param {Array} str - 字符串数组
         * @param {number} index - 创建元素的数量
         */
        async createHTMLElement(dom, str, index) {
            // 使用 Promise.all 和 Array.from 创建并行执行的 Promise 数组
            const oDiv = document.getElementById(dom);
            const divElements = oDiv.querySelectorAll('div');
            // 获取 div 元素数量
            const divCount = divElements.length;
            if (divCount == index) return;
            await Promise.all(
                Array.from({ length: index }, () => {
                    // 生成随机 ID
                    const id = 'mk_' + Math.random().toString(36).slice(2);
                    // 创建新的 div 元素
                    const newElement = document.createElement('div');
                    newElement.id = id;
                    newElement.style.display = 'none';
                    newElement.style.margin = '8px 0';
                    // 将新元素添加到目标元素中
                    oDiv.appendChild(newElement);
                    if (str.length !== 0) {
                        // 从数组中随机选择一个字符串，调用 baiduDom 加载脚本
                        return this.baiduDom(id, str[parseInt(Math.random() * str.length)]);
                    }
                })
            );
        }

        /**
         * 加载百度脚本
         * @param {HTMLElement} dom - 目标元素
         * @param {string} id - 脚本 ID
         */
        async baiduDom(dom, id) {
            // 创建 script 元素
            const script = document.createElement('script');
            script.src = id;
            script.async = true;
            await new Promise((resolve) => {
                // 监听脚本加载完成事件
                script.onload = resolve;
                // 将脚本添加到指定的 DOM 元素中
                document.getElementById(dom).appendChild(script);
                // 显示指定的 DOM 元素
                document.getElementById(dom).style.display = 'block';
            });
        }

        /**
         * 处理可见性变化的回调函数
         * @param {Array} entries - IntersectionObserverEntry 数组
         */
        handleIntersection(entries) {
            // 遍历 IntersectionObserverEntry 数组
            entries.forEach(async (entry) => {
                if (entry.isIntersecting) {
                    // 从目标元素的数据集属性中获取相关信息
                    const { selector, arr, index } = entry.target.dataset;
                    // 创建 HTML 元素
                    await this.createHTMLElement(selector, arr.split(','), index);
                    // 停止监听目标元素的可见性变化
                    this.observer.unobserve(entry.target);
                }
            });
        }

        /**
         * 设置元素的数据集属性
         * @param {HTMLElement} element - 目标元素
         * @param {Object} data - 数据集属性对象
         */
        setDatasetAttributes(element, data) {
            Object.keys(data).forEach((key) => {
                // 设置元素的数据集属性
                element.dataset[key] = data[key];
            });
        }
    }

const myFunc = new IntersectionHandler();
/**
selector:广告位置id;
arr:广告数组；例子：['asdasdasddasd.js','asdasdsfasfasfasfa.js']
index：加载广告的数量；
***/
const elements = [
	       { selector: 'infoTop', arr: arr["infoTop"].arr, index: arr["infoTop"].index },
	       { selector: 'infodom1', arr: arr["infodom1"].arr, index: arr["infodom1"].index },
	       { selector: 'infoTitle', arr: arr["infoTitle"].arr, index: arr["infoTitle"].index },
	       { selector: 'pagingon', arr: arr["pagingon"].arr, index: arr["pagingon"].index },
	       { selector: 'pagination', arr: arr["pagination"].arr, index: arr["pagination"].index },
	       { selector: 'infodom2', arr: arr["infodom2"].arr, index: arr["infodom2"].index },
	   ];
            /**调用**/
            myFunc.executeSequentially(elements);