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

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

问题分析

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

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

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

1. 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
           });
       });
   }

   登录后复制

2. 主逻辑：

   使用 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();
       }
   })();

   登录后复制

3. 完整 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
   登录后复制

使用方法

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

注意事项

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

总结

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

以上就是解决 Bookmarklet 仅触发第一个元素点击的问题的详细内容，更多请关注php中文网其它相关文章！