在SAP UI5中多次单击按钮

Question

我几乎已经尝试了一切，以防止多次单击按钮，从而导致多个订单创建/服务调用--使按钮在按下时立即禁用，使其处于繁忙状态，为dblClick编写dblClick，在创建订单时设置/重置标志等等。

下面是我的代码：

在片段中

     <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>

*在Controller*保存/提交时，根据源的不同，使用相同的函数。但两者都存在多次点击的问题。当前注释了双击事件捕获功能。

_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属性需要时间，而在ide set上工作的是可见的。还请注意，如果使用的是片段，则无法直接获取id，则获取id的语法略有不同(u可以搜索相同的id)。

        // 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
        }
    });
}