如果文本相同，有没有办法停止函数，如果文本不一样，重新运行函数？

Question

我试图检查动态生成的段落<p>的文本是否等于先前动态生成的段落，并且如果它们（段落）相等则停止函数并生成另一个不等于前一段的新段落。

就像是

if(prevParagraph.text() == currentParagraph.text()) {
    stop.function();  // Stop the function and don't generate any paragraph
} else {
    start.function(); // Start the function and generate a non repeated paragraph
}

到目前为止，我尝试过以下的CODE（现在已经尝试了5天），但我可以通过console.log();检测到它，但不能阻止它生成相同的文本。

这是一个CodePen，完整的代码：https://codepen.io/anon/pen/XQebpN

生成文本的函数：

var checkIfTextIsTheSame;
var createMessage = function(
    cardTitle,
    cardDescription,
    specialOrNot,
    parentHTML
) {
    if (cardDescription == null || cardDescription == undefined) {
        var parentHTML =
            "<div class='container'>" +
            "<div class='parent'><p class='card-title'>" +
            cardTitle +
            "</p></div>" +
            "</div>";
    } else if (specialOrNot != null || specialOrNot != undefined) {
        var parentHTML =
            "<div class='container special'>" +
            "<div class='special-icon-container'> <img src='https://i.imgur.com/0Ae3zdD.png' alt='Special' class='special-icon'></div>" +
            "<div class='parent'><p class='card-title'>" +
            cardTitle +
            "</p>" +
            "<p class='card-description'>" +
            cardDescription +
            "</p></div>" +
            "</div>";
    } else {
        var parentHTML =
            "<div class='container'>" +
            "<div class='parent'><p class='card-title'>" +
            cardTitle +
            "</p>" +
            "<p class='card-description'>" +
            cardDescription +
            "</p></div>" +
            "</div>";
    }

    function createTextAfterCheck() {
        $(".paragraphs-container").append(parentHTML);
        if (
            $(".container")
                .last()
                .text()
                .trim() ==
                $(".container")
                    .last()
                    .prev()
                    .text()
                    .trim() &&
            $(".container").length > 0
        ) {
            checkIfTextIsTheSame = true;
            console.log(checkIfTextIsTheSame);
        } else {
            checkIfTextIsTheSame = false;
            console.log(checkIfTextIsTheSame);
        }
    }
    return createTextAfterCheck();
};

createMessage("test"); // will not be the same because there's no elements before it
createMessage("test");
createMessage("test");

非常感谢。

Answer 1

我改变了你的代码： - 简化了createMessage（）函数，因此更容易测试， - 为文本添加了一个ID（实际上这样你可以跟踪object中的所有消息，并从那里选择一个，当你在代码中需要它时

var checkIfTextIsTheSame;

function createMessage(mId, cardTitle, cardDescription, specialOrNot, parentHTML) {
  if (cardDescription == null || cardDescription == undefined) {
    parentHTML =
      "<div class='container' data-mid=" + mId + ">" +
      cardTitle +
      "</div>";
  } else if (specialOrNot != null || specialOrNot != undefined) {
    parentHTML =
      "<div class='container special' data-mid=" + mId + ">" +
      cardTitle +
      cardDescription +
      "</div>";
  } else {
    parentHTML =
      "<div class='container' data-mid=" + mId + ">" +
      cardTitle +
      cardDescription +
      "</div>";
  }

  if (!createTextAfterCheck(mId)) {
    $(".paragraphs-container").append(parentHTML);
  }

}

function createTextAfterCheck(id) {
  let check = false;

  if ($(".container").last().attr("data-mid") == id && $(".container").length > 0) {
    check = true;
  }
  return check;
}

createMessage(0, "test"); // will not be the same because there's no elements before it
createMessage(0, "test");
createMessage(0, "test");

var $form = $("#myForm");
$form.on("submit", function(e) {
  e.preventDefault();

  var formIsValid = false;
  var formIsEmpty = true;

  $("input.email").each(function() {
    if ($(this).val().length > 0) {
      formIsEmpty = false;
    } else {
      formIsEmpty = true;
    }
    if (
      /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/i.test(
        $(this).val()
      )
    ) {
      formIsValid = true;
    } else {
      formIsValid = false;
    }
  });

  if (formIsEmpty == true) {
    createMessage(1, "This field can't be empty");
  }

  if (formIsEmpty == false && formIsValid == false) {
    createMessage(2, 
      "Oops, there must be an error in the provided email, please enter a valid one"
    );
  }

  if (formIsEmpty == false && formIsValid == true) {
    createMessage(3, "thank you for signing-up", " ", "thanks message");
  }
});

.special .special-icon-container,
.special .parent {
  display: inline-block;
  vertical-align: middle;
}

.special .special-icon {
  object-fit: contain;
  height: 26px;
  width: 26px;
  padding: 0;
  border: 0;
  outline: 0;
  margin: 0 8px;
  margin-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">

  <input type="text" class="email" form="myForm">

  <input type="submit" form="myForm">

</form>

<div class="paragraphs-container"></div>

Answer 2

也许您可以将以前的消息存储为变量，并在调用createMessage（）时检查它，如下所示：

var currentMessage = "";

function createMessage(message) {
    if(message != currentMessage) {
        message = currentMessage;
        //change the message in your paragraph
    }
}

编辑：或者如果您不想使用变量，您可以检查段落的当前innerHTML，如此（其中#your-paragraph是动态生成的段落）：

function createMessage(message) {
    if(message != $("#your-paragraph").html()) {
        message = currentMessage;
        //change the message in your paragraph
    }
}

Answer 3

稍微修改了你的代码（参见CodePen）

这是相关的片段：

    function createTextAfterCheck() {
    var currElement = $("<div/>").append(parentHTML);
    var lastElement = $("<div/>").append($(".container").last().clone());

    if (
        $(".container").length > 0 &&
        currElement.html() == lastElement.html()            
    ) {
        checkIfTextIsTheSame = true;
        console.log(checkIfTextIsTheSame);
    } else {
        $('.paragraphs-container').append(currElement.html());
        checkIfTextIsTheSame = false;
        console.log(checkIfTextIsTheSame);
    }
}