javascript - 如何避免多次Ajax调用

我需要的


  当触发点击事件时，将仅进行一次服务呼叫。


用例

下拉菜单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已为dowpdown_1分配了ID
  
  dowpdown 2已为dowpdown_2分配了ID
  
  dowpdown 3已使用dowpdown_3分配了ID

$("#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');
          }
        });
      });
    }
  });
});

任何解决方案都是最欢迎的。

最佳答案

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

看来这是同一事件，但实际上是将新的更改事件绑定到下拉菜单。

您可以只绑定一次事件，或者如果您想要以前的结构（似乎像层叠功能，但我不确定），则可以使用以下方法：

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

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

这样，每次将新功能添加到更改事件上时，您至少会取消与该功能的所有先前绑定，并且不会再次触发。当然，这意味着没有其他与您的情况相关的变更事件，因为它们也将被取消绑定。

就像我说的那样，您可以这样做

$("#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');

    }
});

关于javascript - 如何避免多次Ajax调用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49797435/