Question

我几乎尝试了所有方法来防止多次单击按钮，从而导致多次订单创建/服务调用-使按钮在按下时立即禁用，使其处于繁忙状态，为dblClick编写了addEventDelegate，并在设置/重置标志时订单创建等。什么都行不通！

下面是我的代码：

在片段内

     <HBox alignItems="Center">
     <Button id="1"/>
     <Button id="2"/>
     <Button id="save" text="{i18n>SaveOrder}" press="onSubmit" 
          fieldGroupIds="saveSubmitButtons"  
           visible="order>/Other/SaveVisible}" enabled 
             ="order>/Other/SaveEnabled}"/>
    <Button id="submit" text="{i18n>SubmitOrder}" 
           fieldGroupIds="saveSubmitButtons" press="onSubmit" visible=" 
           {order>/Other/SubmitVisible}" enabled =" 
           {order>/Other/SubmitEnabled}"/>
       </HBox>

****内部控制器*** 保存/提交使用相同的功能，具体取决于来源，并采取进一步的措施。但是两者都存在多次点击的问题。目前评论了双击事件捕获功能。

_initializeData: function(){
      // jQuery.sap.delayedCall(500, this, "attachDblClick");
     }
 attachDblClick: function (oEvent) {
     // var that = this;
     //this.getView().getControlsByFieldGroupId("saveSubmitButtons").
      //forEach(function (element) {
      // element.addEventDelegate({
     //  ondblclick: function (that) {
    //      element.setBusy(true);
   //       element.setBusyIndicatorDelay(0);
  //        this.onSubmit.bind(this);  
 //****Note: This above call does not work - It never redirects to the 
       function
 //    }            
 //     }, this);
//  });
//  },

onSubmit: function (oEvent) {
 var flag = this.getModel("order").getProperty("/Other/SaveEnabled");
 if(flag){
 this.getModel("order").setProperty("/Other/SaveEnabled", false);
 this.getModel("order").setProperty("/Other/SubmitEnabled", false);
 this.source = oEvent.getSource().getText();
 var that = this;
 setTimeout(function()
    {
 POUtils.onSubmit(that, that.source);
     }, 3000);
           }

POUtils.js

onSubmit: function (oContext, mode) {
 ....
  /*oContext.OdataModel.create("/POSet", oContext.Data, null, 
  oContext.success.bind(oContext), oContext.error.bind(oContext));*/

  var token = null;
  $.ajax({
  url: sServiceURl,
  type: "GET",
  async: true,
  beforeSend: function (xhr) {
  sap.ui.core.BusyIndicator.show(0);
  xhr.setRequestHeader("X-CSRF-Token", "Fetch");
  },
  complete: function (xhr) {
  token = xhr.getResponseHeader("X-CSRF-Token");
  oContext.OdataModel.create("/OrdersSet", oContext.Data, null, 
  oContext.successs.bind(oContext), oContext.error.bind(oContext));
       }});

 // error function
error: function(){
  oContext.getModel("order").setProperty("/Other/SaveEnabled", true); 
 oContext.getModel("order").setProperty("/Other/SubmitEnabled", true); 
 }

Answer 1

“ setProperty”方法将触发绑定上的一些异步更新，从而可以在最终将其重新呈现为禁用状态之前多次单击该按钮。

您只需将当前呼叫存储在控制器中，并在运行时阻止其他任何呼叫：

onSubmit: function (oEvent) {
  var flag = this.getModel("order").getProperty("/Other/SaveEnabled");

  // CHECK THE FLAG
  if (flag && !this._callOnGoing) {
    this.getModel("order").setProperty("/Other/SaveEnabled", false);
    this.getModel("order").setProperty("/Other/SubmitEnabled", false);
    this.source = oEvent.getSource().getText();
    var that = this;

    // CREATE THE FLAG
    this._callOnGoing = true

    POUtils.onSubmit(that, that.source);
  }
}

POUtils.js

onSubmit: function (oContext, mode) {
  ....
  /*oContext.OdataModel.create("/POSet", oContext.Data, null, 
  oContext.success.bind(oContext), oContext.error.bind(oContext));*/

  var token = null;
  $.ajax({
    url: sServiceURl,
    type: "GET",
    async: true,
    beforeSend: function (xhr) {
      sap.ui.core.BusyIndicator.show(0);
      xhr.setRequestHeader("X-CSRF-Token", "Fetch");
    },
    complete: function (xhr) {
      token = xhr.getResponseHeader("X-CSRF-Token");
      oContext.OdataModel.create("/OrdersSet", oContext.Data, null, 
      oContext.successs.bind(oContext), oContext.error.bind(oContext));

      // RESET THE FLAG
      delete oContext._callOnGoing
    }});

    // error function
    error: function(){
      oContext.getModel("order").setProperty("/Other/SaveEnabled", true); 
      oContext.getModel("order").setProperty("/Other/SubmitEnabled", true); 

      // RESET THE FLAG
      delete oContext._callOnGoing
    }

Answer 2

用户多次单击时，我遇到了同样的问题，set属性花费时间，而在setvisible上起作用了。另请注意，如果您使用的是片段，则无法直接获取ID，获取ID的语法略有不同（您可以用google搜索）。

        // also disable the accept button, preventing the user not to double click. 
        this.getView().byId("oacceptbtn").setVisible(false);

希望这会有所帮助。

Answer 3

我在您的代码中看到以下几行：

element.setBusy(true);
element.setBusyIndicatorDelay(0);

这会将元素设置为忙于当前延迟（可能是1000），并且然后将延迟设置为0。显然这无济于事。此外，即使已经设置了该值，它也会在每次单击按钮时设置延迟。

如果切换这些行，它应该可以工作。首先设置延迟，然后设置忙状态。

更好的是直接在视图中设置延迟。这是从生产性应用程序中提取的代码，不允许双击：

在您的视图/片段中：

<Button busyIndicatorDelay="0" 
    text="Save" 
    type="Accept" 
    press="onPressSave" />

在您的控制器中：

onPressSave: function (oEvent) {
    const oButton = oEvent.getSource();
    oButton.setBusy(true);

    // more code

    oModel.create(sKey, oObject, {
        success: function (oResponse) {
            oButton.setBusy(false);
            // more success handling code
        },
        error: function (oError) {
            oButton.setBusy(false);
            // more error handling code
        }
    });
}

Answer 4

确保您的后端服务支持可重复请求，并且这不再是问题。 UI5应用程序中的每个请求都应具有一个请求ID ，该服务应保证只执行一次。

SAP中幂等服务的设置：https://help.sap.com/doc/saphelp_hba/1.0/en-US/67/8b5dcd6a5c41789b27b46eb34a6a86/content.htm?no_cache=true

多次单击按钮-SAP UI5

4 个答案: