为什么这些功能重复出现

Why are these functions recurring?

本文关键字：功能 为什么      更新时间：2023-09-26

如果我执行下面函数的步骤1两次（每一次都会触发步骤2、3、6），那么我希望能够执行一次步骤4，而不会重复执行与我执行步骤1相同的次数（步骤4会触发步骤5和6）。

为什么步骤4（及其以下功能）重复执行步骤1（及其以下函数）的次数相同？

  $(function(){
    var selected = [], clickHandler;
    var el = document.getElementById("user_search_tags");
    el.addEventListener("click", returnSelected, false);
    // step 1
    $('#people_search_mobile').change(function() {
      console.log(1);
      $('li a', $('#suggestions')).bind('click.autocomplete', clickHandler);
    });
    // step 2
    function clickHandler() {
      console.log(2);
      selected.push($(this).text());
      returnSelected(selected);
      queryMaker(selected);
    }
    // step 3
    function returnSelected(selected) {
      console.log(3);
      tagRemover(selected);
    }
    // step 4
    function tagRemover(selected) {
      $('.search-tag').click(function(){
        console.log(4);
        $(this).hide();
        spliceAndSearch($(this).text(), selected);
      })
    }
    // step 5
    function spliceAndSearch(removed, selected) {    
      console.log(5);
      selected.splice(selected.indexOf(removed), 1);
      queryMaker(selected);
    }
    // step 6
    function queryMaker(selected) {
      $('#uquery').val(selected);
      $.get(this.action, $('#people_search_mobile').serialize(), null, 'script');
      $('#uquery').val('').focus();
      console.log(6);
      return false;
    }
  });

以下是我的控制台日志摘要（步骤为数字）：

12.3.6.1.2.3.6.4.5.6.4.5.6.3

谢谢。

解决方案

$（function（）｛

var selected = [];
var clickHandler;
$('#people_search_mobile').change(function() {
  $('li a', $('#suggestions')).bind('click.autocomplete', clickHandler);
});
$('body').on('click', '.search-tag', tagRemover);
function tagRemover() {
  $(this).hide();
  console.log(selected);
  selected.splice(selected.indexOf($(this).text()), 1);
  queryMaker(selected);
}
function clickHandler() {
  selected.push($(this).text());
  returnSelected(selected);
  queryMaker(selected);
}
function returnSelected(selected) {
  var saySelected = function() { alert(selected); }
  return saySelected;
}
function queryMaker(selected) {
  $('#uquery').val(selected);
  $.get(this.action, $('#people_search_mobile').serialize(), null, 'script');
  $('#uquery').val('').focus();
  return false;
}

})；

clickhandler（2）调用returnselected（3）调用tagRemover（4）调用spliceAndSearch（5）调用queryMaker（6）

tagRemover只有在搜索标签匹配的情况下才会记录4，所以你的控制台日志有点欺骗性

您已经将步骤1（以及步骤4）绑定到一个"更改"函数，因此它们运行相同次数几乎是不可避免的。

步骤4实际上并没有执行日志记录、隐藏和拼接，而是将它们连接到.search-tag元素的click事件。

从这个角度来看，再次查看您的代码，并找出您应该以什么顺序运行这些代码。

您可以创建一个名为once的全局变量，并将其设置为1。然后，在步骤3中围绕tagRemover(selected);进行if语句，检查是否为once == 1。然后，在if语句内部设置once = 0一次，使其不再执行。

相关文章：