show(） 覆盖了多个 AJAX 调用

show() overwritten multiple ajax calls

本文关键字：AJAX 调用 覆盖 show      更新时间：2023-09-26

我有一个html元素（elem1）和2个JS函数（func1，func2）分别隐藏和显示elem1。这些 JS 函数进行单独的 ajax 调用，func2在内部调用func1。

问题：我需要调用 func2 ，它在内部调用 func1 。称呼func1隐藏elem1。打完电话func1，我想show elem1。但是这个show不起作用。

JSFiddle： https://jsfiddle.net/46o93od2/21/

.HTML：

<div id="elem">
Save ME
</div>
<br/>
<button onclick="func1()" id="func1">Try Func1</button>
<button onclick="func2()" id="func2">Try Func2</button>

.JS：

function func1() {
    $.ajax({
        url: '/echo/json/', //use the correct processing url here
        type: "POST",
        data: {}, // send in your data
        success: function (data) {
            //var aData = JSON.parse(data); // there is no data to parse
                $('#elem').hide();     
        },
        error: function (xhr, errmsg, err) {
            alert('error');
        }
    });
}

function func2() {
    $.ajax({
        url: '/echo/json/', //use the correct processing url here
        type: "POST",
        data: {}, // send in your data
        success: function (data) {
            //var aData = JSON.parse(data); // there is no data to parse
                func1();
            $('#elem').show();     
        },
        error: function (xhr, errmsg, err) {
            alert('error');
        }
    });
}

func1采用一个回调函数，该函数告诉它在获得响应后该做什么。 func2可以传递显示元素的函数。

function func1(callback) {
  $.ajax({
    url: '/echo/json/', //use the correct processing url here
    type: "POST",
    data: {
      json: ''
    }, // send in your data
    success: function(data) {
      if (callback) {
        callback();
      } else {
        $('#elem').hide();
      }
    },
    error: function(xhr, errmsg, err) {
      alert('error');
    }
  });
}

function func2() {
  $.ajax({
    url: '/echo/json/', //use the correct processing url here
    type: "POST",
    data: {
      json: ''
    }, // send in your data
    success: function(data) {
      func1(function() {
        $('#elem').show();
      });
    },
    error: function(xhr, errmsg, err) {
      alert('error');
    }
  });
}

演示

相关文章：