CODEWITHSUNDEEP
javascript
blueSky
blueSky

Reputation: 247

get result of nested click function

Is it possible something like this:

$('#btna').click(function(){
    console.log(abc());
})

function abc() {
    $('#btnb').click(function(){
        var result = false;
    });
    $('#btnc').click(function(){
        var result = true;
    });
    return result;
}

So clicking on btna I need to wait while btnb or btnc is clicked and write that result in console.

Any help?

Upvotes: 1

Views: 132

Answers (2)

pushkin
pushkin

Reputation: 10227

Assuming you want to wait for all the buttons to be clicked (which seems to be the case given the answer you accepted), and assuming you are using ECMA 2017, you can use the more modern async/await pattern.

const btna = $("#btna");
const btnb = $("#btnb");
const btnc = $("#btnc");

async function handler(btn) {
   return new Promise((resolve) => {
     btn.on("click", () => {
        resolve(`clicked ${btn.attr("id")}`);
     });
   });
}

(async () => { 
  let values = await Promise.all([handler(btna), handler(btnb), handler(btnc)]);
  console.log(values); 
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btna">btna</button>
<button id="btnb">btnb</button>
<button id="btnc">btnc</button>

Based on your question though, it sounds like you don't want to wait until all buttons are clicked. You just want to log different values when btnb is clicked after btna vs btnc is clicked after btna. In that case, you don't need promises at all and can just do this:

const btna = $("#btna");
const btnb = $("#btnb");
const btnc = $("#btnc");

btna.click(() => {
    btnb.on("click", clickHandler);
    btnc.on("click", clickHandler);
});

function clickHandler() {
  console.log(this.id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btna">btna</button>
<button id="btnb">btnb</button>
<button id="btnc">btnc</button>

Upvotes: 1

JackNavaRow
JackNavaRow

Reputation: 195

Other Way to do, its using Promises, this will run in especific order waiting for previous click, except the first button ($btna) 

const $btna = document.getElementById('btna');
const $btnb = document.getElementById('btnb');
const $btnc = document.getElementById('btnc');


function executeListener(btn ){
  return new Promise(function(resolve, reject) {
    btn.addEventListener("click" , function(){
      let jsonReturn = {
        action : "click" ,
        button : btn
      }
      resolve(jsonReturn)
    });
  })
}
executeListener($btna)
.then(function(btnaSuccess) {
  console.log("click btna");
  return executeListener($btnb)
}).then(function(btnbSuccess){
  console.log("click btnb");
  return executeListener($btnc);
}).then(function(btncSuccess){
  console.log("click btnc")
  console.log("Chispas");
})
<button id="btna">btna</button>
<button id="btnb">btnb</button>
<button id="btnc">btnc</button>

Also, you could use Promise.all

const $btna = document.getElementById('btna');
const $btnb = document.getElementById('btnb');
const $btnc = document.getElementById('btnc');


function executeListener(btn ){
  return new Promise(function(resolve, reject) {
    btn.addEventListener("click" , function(){
      let jsonReturn = {
        action : "click" ,
        button : btn
      }
      resolve(jsonReturn)
    });
  })
}
Promise.all([
executeListener($btna), 
executeListener($btnb),
executeListener($btnc)])
.then(values => { 
  console.log("resolve all clicks");  
  console.log("Chispas")
  
  

});
<button id="btna">btna</button>
<button id="btnb">btnb</button>
<button id="btnc">btnc</button>

Upvotes: 2

Related Questions