首页 > 文章 > 前端

Bookmarklet只触发一次怎么解决

时间：2025-08-29 23:24:52 431浏览收藏

在使用 Bookmarklet 批量删除 GitHub 分支时，是否遇到过只触发第一个删除按钮的问题？本文深入解析了此问题的根源：由于 GitHub 页面在删除分支时会禁用其他按钮，导致 Bookmarklet 快速触发的后续点击事件失效。为了解决这个问题，我们提供了一种基于 `async/await` 和 `MutationObserver` 的解决方案。通过 `waitTillNotDisabled` 函数，异步等待每个删除按钮变为可用状态，再进行点击，确保所有符合条件的分支都能被成功删除。本文还提供了完整的 Bookmarklet 代码和使用方法，助你轻松实现 GitHub 分支的批量清理，提高工作效率。了解更多关于 Bookmarklet 批量操作的技巧，请继续阅读！

解决 Bookmarklet 仅触发第一个元素点击的问题

Bookmarklet 在批量操作 GitHub 分支删除按钮时，仅触发第一个元素点击的问题，通常是由于点击事件触发后，后续的按钮被禁用导致。以下提供一种使用异步等待和 MutationObserver 机制解决此问题的方案。

问题分析

在 GitHub 的分支管理页面，当点击一个删除按钮时，页面会发起删除请求，并禁用其他删除按钮，防止并发操作。如果 Bookmarklet 快速地遍历所有按钮并触发点击事件，那么只有第一个按钮能够成功触发，后续的按钮由于被禁用而无法响应。

解决方案：使用异步等待和 MutationObserver

为了解决这个问题，我们需要在点击一个删除按钮后，等待该按钮变为可用状态，再点击下一个按钮。这可以通过结合 async/await 和 MutationObserver 来实现。

waitTillNotDisabled 函数：

这个函数使用 Promise 和 MutationObserver 来监听目标元素（删除按钮）的 disabled 属性变化。如果按钮当前处于禁用状态，MutationObserver 会持续观察 document.body 的子树变化，一旦检测到按钮不再被禁用，Promise 就会 resolve，从而允许程序继续执行。

function waitTillNotDisabled(elm) {
    return new Promise(resolve => {
        if (!elm.disabled) {
            return resolve();
        }

        const observer = new MutationObserver(mutations => {
            if (!elm.disabled) {
                resolve();
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

主逻辑：

使用 document.querySelectorAll 找到所有符合条件的删除按钮。然后，使用 for 循环遍历这些按钮，并在每次迭代中使用 await waitTillNotDisabled(deleteButton) 来等待当前按钮变为可用状态。只有当按钮可用时，才会触发 deleteButton.click()。

(async function(){
    function waitTillNotDisabled(elm) {
        return new Promise(resolve => {
            if (!elm.disabled) {
                return resolve();
            }

            const observer = new MutationObserver(mutations => {
                if (!elm.disabled) {
                    resolve();
                    observer.disconnect();
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    }

    const deleteButtons = document.querySelectorAll('span[title="Status: Merged"], span[title="Status: Closed"]');

    for (let i=0;i

完整 Bookmarklet 代码：

将以上代码封装成一个 Bookmarklet，方便在浏览器中直接使用。

javascript:(async function(){
function waitTillNotDisabled(elm) {
    return new Promise(resolve => {
        if (!elm.disabled) {
            return resolve();
        }

        const observer = new MutationObserver(mutations => {
            if (!elm.disabled) {
                resolve();
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

const deleteButtons = document.querySelectorAll('span[title="Status: Merged"], span[title="Status: Closed"]');

for (let i=0;i

使用方法

将以上代码复制到浏览器的地址栏中，并将其保存为书签。
打开 GitHub 的分支管理页面。
点击保存的书签，即可自动删除所有已合并或已关闭的分支。

注意事项

此 Bookmarklet 依赖于 GitHub 页面结构的稳定性。如果 GitHub 页面结构发生变化，可能需要修改选择器。
由于涉及到页面操作，请谨慎使用，并确保了解其行为。
此方法通过等待按钮变为可用状态来避免并发问题，但可能会降低执行效率。

总结

通过结合 async/await 和 MutationObserver，可以有效地解决 Bookmarklet 在批量操作时遇到的并发问题。这种方法不仅适用于 GitHub 分支删除，还可以应用于其他类似的场景，例如批量点赞、批量关注等。关键在于理解页面行为，并使用适当的技术手段来处理异步操作和状态变化。

今天关于《Bookmarklet只触发一次怎么解决》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！