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 }); });}
主逻辑：
听脑AI
听脑AI语音，一款专注于音视频内容的工作学习助手，为用户提供便捷的音视频内容记录、整理与分析功能。
745 查看详情 
使用 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<deleteButtons.length;i++) { const deleteButton = deleteButtons[i].parentNode.parentNode.querySelector('.js-branch-delete-button'); await waitTillNotDisabled(deleteButton); deleteButton.click(); }})();
完整 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<deleteButtons.length;i++) { const deleteButton = deleteButtons[i].parentNode.parentNode.querySelector('.js-branch-delete-button'); await waitTillNotDisabled(deleteButton); deleteButton.click();}})();
使用方法
将以上代码复制到浏览器的地址栏中，并将其保存为书签。打开 GitHub 的分支管理页面。点击保存的书签，即可自动删除所有已合并或已关闭的分支。
注意事项
此 Bookmarklet 依赖于 GitHub 页面结构的稳定性。如果 GitHub 页面结构发生变化，可能需要修改选择器。由于涉及到页面操作，请谨慎使用，并确保了解其行为。此方法通过等待按钮变为可用状态来避免并发问题，但可能会降低执行效率。
总结
通过结合 async/await 和 MutationObserver，可以有效地解决 Bookmarklet 在批量操作时遇到的并发问题。这种方法不仅适用于 GitHub 分支删除，还可以应用于其他类似的场景，例如批量点赞、批量关注等。关键在于理解页面行为，并使用适当的技术手段来处理异步操作和状态变化。
以上就是解决 Bookmarklet 仅触发第一个元素点击的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/750556.html
微信扫一扫 
支付宝扫一扫 
