4

我正在尝试将 PayPal Smart Payment 按钮添加到我的网站。用于呈现按钮的 HTML 容器是通过 AJAX 请求使用 AJAX 请求paypal.Buttons.render()调用的方法接收onsuccess的。现在一切正常，除了按钮需要一些时间在网站上呈现并变为活动状态。我想提示我的用户该按钮正在呈现或加载，因此当 AJAX 请求返回并且没有显示任何按钮时，他们不会处于黑暗中。有没有办法知道按钮何时完全呈现？

$.ajax({
  url: example/foler,
  data: data,
  success: success(data)
});

function success(data) {
  // data = <div id='paypal-button-container'></div>
  paypal.Buttons().render('#paypal-button-container');

  // Display "Button Loading..."
  // Find out if button has completely rendered, then turn off "button loading..."
}
4

2 回答 2

7

你可以使用 .then(callback) 因为 render() 返回一个 Promise。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Promise 是一个对象，表示异步操作的最终完成或失败。由于大多数人都是已经创建的 Promise 的消费者，本指南将在解释如何创建它们之前解释返回的 Promise 的消费。

从本质上讲，promise 是一个返回的对象，您将回调附加到该对象，而不是将回调传递给函数。

$.ajax({
  url: example/foler,
  data: data,
  success: success(data)
});

function success(data) {
  // data = <div id='paypal-button-container'></div>
  // Display "Button Loading..."
  paypal.Buttons().render('#paypal-button-container').then(function() { 
    // Button has completely rendered, then turn off "button loading..."
  });

}
于 2019-12-14T16:53:01.870 回答
2

这里有一些优化按钮渲染的建议方法： https ://developer.paypal.com/docs/checkout/troubleshoot/performance/

您通过 Ajax 获取什么数据？

如果您在显示按钮之前等待某些条件，请预渲染隐藏的容器和按钮，然后在成功回调时显示它们。

或者，如果按钮作为 iframe 加载 - 在这种情况下将其包装在 div 中，然后只需使用 css 将加载 gif 指定为 iframe 上的背景图像。


div.button-wrapper-div {
  background:url(../images/loader.gif) center center no-repeat;
}```
于 2019-12-11T14:52:44.257 回答