The difference between addEnterActionListener() vs addLeaveActionListener()

[Weilin1]

Hi, 

Like to check if anyone has explore the RUM JavaScript API on addEnterActionListener() vs addLeaveActionListener()?

According to the documentation, addEnterActionListener() is called while entering an action, which I understand and have managed to get the expected outcome, but addLeaveActionListener() is slightly complicated to me. 

addLeaveActionListener() is called when leaving an action and is used to hook into the out of the box action closing event. On what type of circumstances should i be using it?

In the below example, when i called actionPropertyToXHR() follow by submitSentiments() function, the function to add string action property addStringProperties() get called 3 times after addRatingToAction(). 

I suspected the 3 calls was because in submitSentiments() there are 3 actions (2XHR action 1 custom action). but why would it be triggered when i did include removeLeaveActionListener()?

var rating_long;

function submitSentiments(value) {
var rating = +value;
// XHR Request
fetch('https://dummyjson.com/products/1')
.then(response => response.json())
.then(data => {

rating_long = { sentiment_rating:rating };
window.dtrum.addEnterActionListener(addRatingToAction);

var submtitSentiment = window.dtrum.enterAction('Submit Sentiment');
window.dtrum.leaveAction(submtitSentiment);

window.dtrum.removeEnterActionListener(addRatingToAction);

})

}

function addRatingToAction(actionId) {
window.dtrum.addActionProperties(actionId, rating_long, null, null, null);
}

var property_name_str;

function actionPropertyToXHR() {

property_name_str = {property_name:"Agree"};
dtrum.addLeaveActionListener(addStringProperties);

fetch('https://jsonplaceholder.typicode.com/posts', {
method:'POST',
body:JSON.stringify({
title:'foo',
body:'bar',
userId:1,
}),
headers: {
'Content-type':'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => console.log(json));

dtrum.removeLeaveActionListener(addStringProperties);
}

function addStringProperties(actionId) {
window.dtrum.addActionProperties(actionId, null, null, property_name_str, null);
}

 Thanks in advance!

[Weilin1 · Accepted solution]

I believe i might have figured out why. 

When using addLeaveActionListener(), it is triggered after an action has ended.

In my example, because my removeLeaveActionListener() is placed after the action, it was never triggered.

Hence whenever an action has ended (in my case the 3 actions in submitSentiments()), it will trigger the addStringProperties() as the listener was never removed.

var property_name_str;

function actionPropertyToXHR() {

property_name_str = {property_name:"Agree"};
dtrum.addLeaveActionListener(addStringProperties);

fetch('https://jsonplaceholder.typicode.com/posts', {
method:'POST',
body:JSON.stringify({
title:'foo',
body:'bar',
userId:1,
}),
headers: {
'Content-type':'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => console.log(json));

dtrum.removeLeaveActionListener(addStringProperties);
}

function addStringProperties(actionId) {
window.dtrum.addActionProperties(actionId, null, null, property_name_str, null);
}

Instead if i were to place the removeLeaveActionListener() in the addStringProperties() function, it will remove the listener and is working as expected.

var property_name_str;

function actionPropertyToXHR() {

property_name_str = {property_name:"Agree"};
dtrum.addLeaveActionListener(addStringProperties);

fetch('https://jsonplaceholder.typicode.com/posts', {
method:'POST',
body:JSON.stringify({
title:'foo',
body:'bar',
userId:1,
}),
headers: {
'Content-type':'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => console.log(json));
}

function addStringProperties(actionId) {
window.dtrum.addActionProperties(actionId, null, null, property_name_str, null);
dtrum.removeLeaveActionListener(addStringProperties);
}