Figma.off in if statement doesn't work

The reason this isn’t working is because fn is defined as a new function every time you are checking the message. The way figma.on and figma.off works is by comparing the values of the supplied functions, which are compared by reference, so creating a new function every time means the function supplied to the on callback and the function supplied to the off callback will never be the same.

do you have any idea to fix this because i have those node and lnode variables that needs to be in the fn function which are created by the message

You are going to want to keep track of the ids outside of your onmessage function, and define your documentchange function outside of the onmessage function as well.

Here is a very rough example of how I would watch for property changes on nodes, then react to those changes. You will need to modify it to work for your needs, but I’ve left some comments so hopefully you can figure out how to move forward:

// create an array of node ids to watch for changes
let watchedNodeIds: string[] = []

// create the documentchange handler
const onDocumentChange = event => {
  for (const change of event.documentChanges) {
    if (change.type === 'PROPERTY_CHANGE') {
      // check the array to see if the changed node id matches an id in the list of ids you are keeping track of
      const watchedId = watchedNodeIds.find(id => id === change.id)

      // if there is a match, get the changed node and do whatever you need to do with it
      if (watchedId) {
        // do stuff with the node
        const node = figma.getNodeById(watchedId)
        node.resize(500, 500)
        node.getPluginData('foo')
        node.remove()
      }
    }
  }
}

// create a variable to keep track of whether the documentchange handler is listening for changes or not
let isWatching = false

// our onmessage handler is now _only_ responsible for adding/removing ids to the array we defined above, as well as attaching/removing our documentchange handler when necessary
figma.ui.onmessage = (message: { type: 'watch' | 'unwatch', nodeId: string }) => {
  if (message.type === 'watch') {
    // add node id to the array if watching for changes
    watchedNodeIds.push(message.nodeId)
  } else {
    // remove node id to the array if no longer watching
    watchedNodeIds = watchedNodeIds.filter(id => id !== message.nodeId)
  }

  // add the event handler if there are ids that need to be watched and we are not actively listening
  if (watchedNodeIds.length > 0 && !isWatching) {
    figma.on('documentchange', onDocumentChange)
    // update isWatching to true since we are now watching for changes
    isWatching = true
    return
  }

  // remove the event handler if there are no ids being watched
  if (watchedNodeIds.length === 0 && isWatching) {
    figma.off('documentchange', onDocumentChange)
    // update isWatching to false since we are no longer watching for changes
    isWatching = false
  }
}

I don’t think I can provide much more technical help outside of this, but good luck!

hello i have done some changes on that but it looks like it is the same as before i let the function outside on message (btw there is other messages that is why i added new types) but it doesn’t work also the is watching variable isn’t working properly sometimes it does sometimes no if you have time take a look at it and let me know if there is a problem

// create an array of node ids to watch for changes
let watchedNodeIds: string[] = []
let watchedlinkedNodeIds: string[] = []
// create the documentchange handler
const onDocumentChange = event => {
  for (const change of event.documentChanges) {
    if (change.type === 'PROPERTY_CHANGE') {
      // check the array to see if the changed node id matches an id in the list of ids you are keeping track of
      const watchedNId = watchedNodeIds.find(id => id === change.id)
      // if there is a match, get the changed node and do whatever you need to do with it
      if (watchedNId) {
        // do stuff with the node
        const lnode = figma.getNodeById(watchedlinkedNodeIds[0])
        const node = figma.getNodeById(watchedNId)
        lnode.resize(lnode.width, node.height)
      }
    }
  }
}
// create a variable to keep track of whether the documentchange handler is listening for changes or not
let isWatching = false

figma.ui.onmessage = (pluginMessage: {selid:string, key:string, height:string|number, id: 'adding'}|{ type: 'watch' | 'unwatch', nodeId: string, lnknodeID: string, id: 'link-it' } | {delnodeId: string ,id: 'delete'}) => {
  //when the add button pressed message see if it is in the stored keys or no
if (pluginMessage.id === 'link-it') {
    console.log(pluginMessage);
    console.log(pluginMessage.nodeId);
    
    // our onmessage handler is now _only_ responsible for adding/removing ids to the array we defined above, as well as attaching/removing our documentchange handler when necessary
    if (pluginMessage.type === 'watch') {
      // add node id to the array if watching for changes
      watchedNodeIds.push(pluginMessage.nodeId)
      watchedlinkedNodeIds.push(pluginMessage.lnknodeID)
    } else {
      // remove node id to the array if no longer watching
      console.log(watchedNodeIds);
      watchedNodeIds = watchedNodeIds.filter(id => id !== pluginMessage.nodeId)
      console.log(watchedNodeIds.length);
      
    }
  
    // add the event handler if there are ids that need to be watched and we are not actively listening
    if (watchedNodeIds.length > 0 && isWatching) {
      console.log('handler on');
      const lnode = figma.getNodeById(watchedlinkedNodeIds[0])
      const node = figma.getNodeById(watchedNodeIds[0])
      const id = node?.id as string + lnode?.id as string

      figma.ui.postMessage({node:node?.id, link:lnode?.id, id:'storageadd',subid:'link'})
      figma.clientStorage.setAsync(id,{subid:'linked',node:node?.id as string,link:lnode?.id});
      //do the height changes in figma and post message of the id of nodes to the frontend to put the new links
      lnode.resize(lnode.width, node.height)
      figma.on('documentchange', onDocumentChange)
      // update isWatching to true since we are now watching for changes
      isWatching = true
    }
  
    // remove the event handler if there are no ids being watched
    if (watchedNodeIds.length === 0 && !isWatching) {
      console.log('handler off');
      figma.clientStorage.deleteAsync(pluginMessage.nodeId)
      figma.off('documentchange', onDocumentChange)
      console.log('shit');
      
      // update isWatching to false since we are no longer watching for changes
      isWatching = false
    }
  }
}