javascript - 如何避免多次 Ajax 调用

Question

我需要什么

when click event is triggered service call is made then it may call only one time only.

用例

下拉菜单1

下拉菜单2

下拉菜单3

        1. There are three dropdown in html page.
        2. when dropdown 1 is call - ajax call made only 1 time.
        3. when dropwdown 2 is call -ajax call made only 1 time.
        4. when dropwdown 3 is call -ajax call made only 1 time.

        

现在用户更改下拉菜单 1。

        5. when dropwdown 1 is call -ajax call made only 1 time.

出现问题

        6. Now when dropwdown 2 is call -ajax call made only 2 time.
        7. Now when dropwdown 3 is call -ajax call made only 2 time.

与我们更改下拉菜单 1 时类似

        count increase by one.

现在用户更改下拉菜单 1。

        8. Now when dropwdown 2 is call -ajax call made only 3 time.
        9. Now when dropwdown 3 is call -ajax call made only 3 time.

JS代码

dowpdown 1 has assigned id with dowpdown_1

dowpdown 2 has assigned id with dowpdown_2

dowpdown 3 has assigned id with dowpdown_3

$("#dowpdown_1").change(function() {
  $.ajax({
    url: 'path',
    cache: false,
    data: {
      data
    },
    success: function(html) {
      console.log('dowpdown_1');
      $("#dowpdown_2").change(function() {
        $.ajax({
          url: 'path',
          cache: false,
          data: {
            data
          },
          success: function(html) {
            console.log('dowpdown_2');
          }
        });
      }
      $("#dowpdown_3").change(function() {
        $.ajax({
          url: 'path',
          cache: false,
          data: {
            data
          },
          success: function(html) {
            console.log('dowpdown_3');
          }
        });
      });
    }
  });
});

欢迎任何解决方案。

Answer 1

每次更改 dropdown_1 时，都会向 dropdown_2 和 dropdown_3 添加一个执行相同操作的新事件。

这似乎是同一个事件，但实际上您正在将新的更改事件绑定(bind)到下拉列表。

您可以只绑定(bind)一次事件，或者如果您想要以前的结构(看起来像级联功能，但我不确定)，您可以使用这个:

$("#dowpdown_2").off().on('change', function () {// do the ajax});

$("#dowpdown_3").off().on('change', function () {// do the ajax});

这样，每次您在更改事件上添加新函数时，您至少都会解除之前所有事件的绑定(bind)，并且不会再次触发。当然，这意味着没有任何其他更改事件对您的情况很重要，因为它们也将被解除绑定(bind)。

否则正如我所说，你可以这样做

$("#dowpdown_1").on('change', function () 
{
    $.ajax({
    url: 'path',
    cache: false,
    data: {data},
    success: function (html) 
    {
      console.log('dowpdown_1');
    }
});

$("#dowpdown_2").on('change', function () {
        $.ajax({
        url: 'path',
        cache: false,
        data: {data},
        success: function (html) 
        {
            console.log('dowpdown_2');
        }
});
$("#dowpdown_3").on('change', function () {
    $.ajax({
    url: 'path',
    cache: false,
    data: {data},
    success: function (html) 
    {
        console.log('dowpdown_3');

    }
});