title: How to create/destroy dynamic objects after the same event in QML?
body: <p>I have a GridLayout <code>dynamicLayout</code> which has dynamically created/destroyed elements. Create/destroy happens when I click a Button <code>myButton</code>, for which I also provided the code below.</p>
  
  <pre><code>GridLayout {
      id: dynamicLayout
      anchors.fill: parent
  
      Component {
          id: imageComponent
          Image {
              visible: true
              function deleteImage() {
                  console.log("destroying image")
                  destroy()
              }
          }
      }
  }
  
      Button {
      id: myButton
      visible: true
      x: 200
      y: 200
  
      onClicked: {
          createImageObjects();
      }
  }
  
  
  function createImageObjects() {
      if (imageComponent.status == Component.Ready)
          finishCreation();
      else
          imageComponent.statusChanged.connect(finishCreation);
  }
  
  function finishCreation() {
      if (imageComponent.status == Component.Ready) {
          for (var i= 0; i &lt; 3; i++) {
              var object = imageComponent.createObject(dynamicLayout, {"width": 100, "height": 100, "source": FILE_PATH});
              if (object == null) {
                  // Error Handling
                  console.log("Error creating object");
              } else {
                 myButton.clicked.connect(object.deleteImage)
              }
          }
      } else if (imageComponent.status == Component.Error) {
          // Error Handling
          console.log("Error loading component:", imageComponent.errorString());
      }
  }
  </code></pre>
  
  <p>So what I intend to do is to add 3 new images to the layout when the button is clicked and while deleting the older 3 images. However, the newer 3 images are created first and after that all of the 6 images are destroyed  at once. (I get 6 'destroying images' message with the same click event)</p>
  
  <p>How can I postpone the connecting to the next click event?</p>