Блог

Я использую cytoscapejs и соединение расширения-перетаскивание. Моя цель — отправить событие в мою базу данных, когда я перетаскиваю узел и перетаскиваю его поверх другого. Я беру идентификатор (моего будущего дочернего узла) с помощью cdndtapstart или cdndout (когда он находится внутри составного узла) и event.target._private.data.id , а затем с помощью cdnddrop я вызываю выпадающий список._private.data.id , и с этими данными я могу выполнить свой ajax-вызов. Проблема, с которой я сталкиваюсь, заключается в том, что эти события накапливаются одно над другим, если я перетащу узел один раз, все в порядке, во второй раз, когда я его перетаскиваю, он вызовет два ajax-вызова, в третий раз даст мне три вызова. Есть ли способ избежать этого или об этом следует сообщать как об ошибке?

 cy.on('cdndout', 'node', function(event, dropTarget, dropSibling){
    let type = event.target._private.data.type;
    let id = event.target._private.data.id;
    let gId = event.target._private.data;

    if(type == 'device'){
      cy.on('cdnddrop', function(event, dropTarget, dropSibling){
        var typeDe = dropSibling._private.data
        if(typeDe == undefined){
          $.notify({message: err},{type: 'danger'});
          createGraph()
        } else {
          let uuid = event.target._private.data.id;
          let gId = dropSibling._private.data.id;
          setResourceToGroup(uuid, gId, cb)
          .then(reso => getAllResources())
          .then(allReso => createGraph())
          .catch(err => {
            $.notify({message: parseLog(err)},{type: 'danger'});
            createGraph()
          })
        }
      })
    } 
})
 

Таким образом, с помощью этого кода вызов ajax, который у меня есть в функции setResourceToGroup, будет выполняться столько раз, сколько я перетаскиваю узел. Я предполагаю, что я неправильно обрабатываю события, и они накапливаются… любая помощь с этим?

События в cytoscape.js все довольно просто: вы привязываете событие, и это событие срабатывает при выполнении условий привязанного события. Проблемы начинаются, когда вы вызываете одну и ту же операцию связывания дважды или более. Затем ваше событие работает нормально, но в ту секунду, когда вы снова вызываете эту привязку, у вас на руках 2 события. И они будут запускать оба одновременно! Итак, как вы это решаете?

Каждый раз, когда вы вызываете cy.bind() (cy.bind() совпадает с cy.on()), вы должны оценить, может ли эта строка выполняться более одного раза. Если да, то вы должны сделать это:

 cy.unbind('cdnout');
cy.bind('cdndout', 'node', function(event, dropTarget, dropSibling){
    let type = event.target._private.data.type;
    let id = event.target._private.data.id;
    let gId = event.target._private.data;
    if(type == 'device'){
      cy.unbind('cdnddrop);
      cy.bind('cdnddrop', function(event, dropTarget, dropSibling){
        var typeDe = dropSibling._private.data
        if(typeDe == undefined){
          $.notify({message: err},{type: 'danger'});
          createGraph()
        } else {
          let uuid = event.target._private.data.id;
          let gId = dropSibling._private.data.id;
          setResourceToGroup(uuid, gId, cb)
          .then(reso => getAllResources())
          .then(allReso => createGraph())
          .catch(err => {
            $.notify({message: parseLog(err)},{type: 'danger'});
            createGraph()
          });
        }
      });
    } 
});
 

Сначала отключив событие, вы можете запустить только одно событие одновременно 🙂