嵌套事件处理程序时避免不必要的多个相同调用

Question

我有一个使用嵌套 jQuery

.on()

事件处理程序的设置，这会导致不必要的重复函数调用。

我想做以下事情：

• 获取用户输入，该输入将传递到外部 API，返回结果列表。
• 用这些结果填充下拉菜单，并自动选择第一个，并用它来执行某些操作。
• 观察下拉列表中的更改，如果用户从列表中选择新选项，请改用该选项。

下面的代码片段实现了我想要的功能，但是，正如您所看到的，

console.log()

被多次调用（其中次数等于

myInput

文本的

input

处理程序被触发的次数）。 [要查看此内容，请在输入框中键入一定数量的字符，然后从下拉列表中选择一个选项。控制台将记录您选择的选项，次数等于您输入的字符数]
如何避免不断增加的相同呼叫？

function setOptions(prefix) {
  // in actual setting, pages = externalAPI(prefix)
  pages = [prefix + "(a)", prefix + "(b)", prefix + "(c)"]
  $('#mySelector').html(
    pages.map(function(page, i) {
      return $("<option />").val(i).text(i + ': ' + page)
    }))
  return pages;
};

function setSelected(val) {$('#mySelected').html(val)};

$(function() {
  $('#myInput').on('input', function() {
    let options = setOptions($(this).val())
    setSelected(options[0]);
    $('#mySelector').on('change', function(e) {
      console.log(this.value);
      setSelected(options[this.value]);
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Input a prefix, then select an option.</p>
<input type="text" id="myInput"></input>
<select id="mySelector"></select>
<p>selected: <span id="mySelected">&nbsp;</span></p>

Answer 1

您只需更换即可

$('#mySelector').on( ... )

与

$('#mySelector').off().on( ... )

创建新元素时取消元素的所有事件处理程序。

下面是用我的修复程序修改的代码片段。

function setOptions(prefix) {
  // in actual setting, pages = externalAPI(prefix)
  pages = [prefix + "(a)", prefix + "(b)", prefix + "(c)"]
  $('#mySelector').html(
    pages.map(function(page, i) {
      return $("<option />").val(i).text(i + ': ' + page)
    }))
  return pages;
};

function setSelected(val) {$('#mySelected').html(val)};

$(function() {
  $('#myInput').on('input', function() {
    let options = setOptions($(this).val())
    setSelected(options[0]);
    $('#mySelector').off().on('change', function(e) {
      console.log(this.value);
      setSelected(options[this.value]);
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Input a prefix, then select an option.</p>
<input type="text" id="myInput"></input>
<select id="mySelector"></select>
<p>selected: <span id="mySelected">&nbsp;</span></p>