通过 jQuery 单击按钮后如何调用回调 function？

Question

I have a button that is saving data. I am trying to execute some line once button work is done.

    function executionRequest(action, acting, data) {
        document.getElementById('vpl_ide_save').click();
        if (!data) {
          data = {};
        }
        if (!lastConsole.isConnected()) {
          VPL_Util.requestAction(action, '', data, options.ajaxurl)
            .done(function (response) {
              VPL_Util.webSocketMonitor(
                response,
                action,
                acting,
                executionActions
              );
            })
            .fail(showErrorMessage);
        }
      }

Can I call a callback function with

document.getElementById('vpl_ide_save').click()

so rest of the lines run after that only

Answer 1

I know your question mentions callbacks, but promises might provide a better way to handle this asynchonous operation. This snippet has pretty comprehensive comments that should explain how you can implement this.

There are three main functions in the snippet. Execution requests are simulated by simulateExecutionRequest , which is responsible for calling asyncSave and then (assuming the save was successful) doExecutionRequest .

The magic happens in asyncSave , which returns a promise. This lets simulateExecutionRequest wait until asyncSave is done and then call doExecutionRequest if the save was successful. Note that asyncSave is also the listener on the Save button (and since it is called directly by simulateExecutionRequest , there's no need to call the button's .click method programmatically).

The doExecutionRequest function is really just a placeholder for whatever you need to do after the save completes. (Right now, it just logs some hard-coded information.)

 const // Identifies some DOM elements input = document.getElementById("myInput"), saveBtn = document.getElementById("vpl_ide_save"), simulateBtn = document.getElementById("simulateBtn"), // Simulates saving some data (but is synchronous) save = function(){ const text = input.value; if(text){ console.log(`saved: '${text}'`); return text; // So we can know if it succeeded } } // Will call `asyncSave` when saveBtn is clicked saveBtn.addEventListener("click", asyncSave); // (IRL, execution requests probably happen programatically) simulateRequestBtn.addEventListener("click", simulateExecutionRequest); // Defines `asyncSave`, which creates and returns a promise. // The promise calls `save` asynchronously using setTimeout. // Because `asyncSave` returns a promise, our other code // can be delayed until after `save` has finished. // (This is called programatically as well as by user interaction) function asyncSave(event){ const promisedSave = new Promise( // Promise constructor takes an executor function // (which takes two functions that are used to provide // output once the promise is resolved or rejected) (resolve, reject) => { // Simulates a delay (because I/O is asynchronous) setTimeout(saveAndSettlePromise, 1500); // Calls `save`, then resolves or rejects promise function saveAndSettlePromise(){ if( save() ){ resolve("saved"); } else{ if(event){ console.log("save what?"); } reject("nothing to save"); } } } ); return promisedSave; } // This is what happens in response to an execution request function simulateExecutionRequest(){ // Calls `asyncSave` asyncSave().then( // If async save resolves, then this anonymous function runs (resolvedValue) => { // (The resolved value is available here if we want it) //Defines some variables const action_val = "log", acting_val = true, lastConsoleIsConnected = false; // Calls `doExecutionRequest` doExecutionRequest(action_val, acting_val); // Defines `doExecutionRequest` function (Demo version) function doExecutionRequest(action, acting, data = {}){ // `data = {}` makes `data` an optional parameter // Checks connection, and does something with data if (.lastConsoleIsConnected){ console:log(`execution request; 'data' has type '${typeof data}'`). } } } ),catch( // If `asyncSave` rejects. this runs instead (reason)=> console:log("request canceled; " + reason) ); }

 <label> Enter something to save: <input id="myInput" value="" /> </label> <div> <button id="vpl_ide_save">Save</button> </div> <hr /> <div> <button id="simulateRequestBtn">Simulate Request</button> </div>