调用openModal函数时如何获取'success'而非'undefined'？

你的问题核心在于异步操作的返回值处理：

• openModal函数执行时，只是完成了按钮的显示和点击事件绑定，本身没有返回任何值，所以直接调用console.log(openModal(1,2,3))会输出undefined。
• 点击按钮的回调函数里的return deleteImg(...)，只是这个回调函数的返回值，并不会传递给openModal的调用者——因为按钮点击是用户后续触发的异步行为，不是同步执行的代码。
• 你尝试的$.when()方法无效，是因为$('#button').on('click')并不是一个Deferred/Promise对象，$.when()会立刻执行done回调，此时status还没有被赋值。

我们可以用Promise来封装按钮点击的异步行为，让openModal返回一个Promise对象，当按钮被点击时，resolve这个Promise并传入deleteImg的返回值。这样调用者就能通过.then()获取到结果。

修改后的代码如下：

JavaScript代码 #

function deleteImg(model, name, id) { 
  return 'success'; 
}

function openModal(model, name, id){
  $('#button').show();
  // 返回一个Promise，封装点击事件的异步结果
  return new Promise((resolve) => {
    // 用one()确保按钮只触发一次，避免重复resolve
    $('#button').one('click', function() {
      const result = deleteImg(model, name, id);
      resolve(result);
      // 可选：点击后隐藏按钮，防止重复操作
      $(this).hide();
    });
  });
}

// 正确的调用方式：通过.then()获取异步结果
openModal(1,2,3).then(result => {
  console.log(result); // 点击按钮后会输出'success'
});

可选：用jQuery Deferred实现（兼容旧版本jQuery） #

如果你更习惯使用jQuery的Deferred对象，也可以这样改写：

function deleteImg(model, name, id) { 
  return 'success'; 
}

function openModal(model, name, id){
  $('#button').show();
  const deferred = $.Deferred();
  $('#button').one('click', function() {
    const result = deleteImg(model, name, id);
    deferred.resolve(result);
    $(this).hide();
  });
  return deferred.promise();
}

// 调用方式
openModal(1,2,3).done(result => {
  console.log(result);
});

• 同步函数的返回值可以直接获取，但异步事件（比如用户点击）的结果必须通过回调、Promise或Deferred来传递。
• 事件回调里的return值不会向上传递到外层函数的调用者，因为事件触发是在函数执行完毕之后发生的。

内容的提问来源于stack exchange，提问作者Michael Eugene Yuen