使用超时交换 DOM 个元素

Question

我目前正在尝试 JavaScript 一点。（香草）所以目前我想做的是交换不同的元素节点。例如，想象一个包含不同条目的列表，稍后将交换这些条目。

为此，应交换 element.length 次随机元素。每次交换后都应该超时。

我现在遇到的问题是列表只有在随机播放功能完成后才会更新。

打算交换一对，等待1秒后再进行下一次交换。

function shuffle(element){
    disableButtons();
    let clicked_elmnt = document.getElementsByTagName(element);
    console.log(clicked_elmnt);
    if(clicked_elmnt.length !== 1 && clicked_elmnt !== 0){
        for (let i = 0; i<clicked_elmnt.length;++i){
            setTimeout(function(){doIt(element,randomNumber(clicked_elmnt.length),randomNumber(clicked_elmnt.length))}, 1000)
        }
    }
    enableButtons();
}

此代码应检查列表中是否有列表，如果它尝试将父项与其子项交换，则滚动新数字。 （似乎有效）

function doIt(element,first,second){
        let clicked_elmnt = document.getElementsByTagName(element);

        if(clicked_elmnt[first].children.length > 0){
            if(clicked_elmnt[first].firstElementChild.isSameNode(clicked_elmnt[second].parentNode)){
                doIt(element,randomNumber(clicked_elmnt.length),randomNumber(clicked_elmnt.length));
            }else{
                if(clicked_elmnt[second].children.length > 0){
                    if(clicked_elmnt[second].firstElementChild.isSameNode(clicked_elmnt[first].parentNode)){
                        doIt(element,randomNumber(clicked_elmnt.length),randomNumber(clicked_elmnt.length));
                    }else{
                        doSwap(clicked_elmnt[first],clicked_elmnt[second]);
                    }
                }else{
                    doSwap(clicked_elmnt[first],clicked_elmnt[second]);
                }
            }   
        }else{
            if(clicked_elmnt[second].children.length > 0){
                if(clicked_elmnt[second].firstElementChild.isSameNode(clicked_elmnt[first].parentNode)){
                    doIt(element,randomNumber(clicked_elmnt.length),randomNumber(clicked_elmnt.length));
                }else{
                    doSwap(clicked_elmnt[first],clicked_elmnt[second]);
                }
            }else{
                doSwap(clicked_elmnt[first],clicked_elmnt[second]);
            }
        }
    }

然后交换发生在下一个函数中。在这里他们被交换了。

function doSwap(n1, n2){
    console.log("swap");
    const afterN2 = n2.nextElementSibling;
    const parent = n2.parentNode;
    if (n1 === afterN2) {
        parent.insertBefore(n1, n2);
      } else {
        n1.replaceWith(n2);
        parent.insertBefore(n1, afterN2);
      }   
}

希望有人能在这里帮助我，而不是那些奇怪的东西。干杯！

Answer 1

我的理解是您希望 doIt 调用、setTimeout 的回调彼此间隔 1 秒。 setTimeout 的工作方式是回调在调用 setTimeout 后排队等待执行 x 毫秒。如果您希望在前一个函数完成后 1 秒调用一个函数，您可以从回调内部调用另一个 setTimeout。

这是您的示例调整后的结果 - doItLater 函数包含一个 setTimeout 调用，并将递归调用自身 clicked_elmnt.length 次。您可以针对真实场景更清晰地设置它，但这与您的示例没有太大偏差。

function shuffle(element) {
  disableButtons();
  let clicked_elmnt = document.getElementsByTagName(element);
  if (clicked_elmnt.length !== 1 && clicked_elmnt !== 0) {
    const doItLater = function (i) {
      setTimeout(() => {
        doIt(element, randomNumber(clicked_elmnt.length), randomNumber(clicked_elmnt.length));
        
        if (i + 1 < clicked_elmnt.length) {
          doItLater(i + 1);
        }
      }, 1000);
    }
    doItLater(0);
  }
  enableButtons();
}

如果您只想在最后一个 doIt 调用完成后调用 enableButtons，您可以将该调用移至 if (i + 1 < clicked_elmnt.length) 的 else 子句。

使用超时交换 DOM 个元素

Swap DOM Elements with Timeout

javascript

dom

dom-events