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 分支删除，还可以应用于其他类似的场景，例如批量点赞、批量关注等。关键在于理解页面行为，并使用适当的技术手段来处理异步操作和状态变化。
