从函数返回值之前保存的空变量

Question

I am trying to save a data using the below query

var content = framejson($(e.target));
        //alert(wpId);
        var dfd = $.Deferred();
        setTimeout(function(){
        saveWebPartProperties(wpId, { Description: content }).done(function () {
                dfd.resolve();
                $(e.target).closest("table").find(".successmessage").show();
            }).fail(self.error);
        },500);

The code for framejson is below

function framejson(elem){
var listname={};
listname["Name"] = $(elem).closest("table").find(".Name").val();
listname["Length"] = $(elem).closest("table").find(".Length").val();
return JSON.stringify(listname);
};

Now in the code where I am trying to save the json content, empty value gets saved when I remove the alert or remove the setTimeout

It works fine only if I have the alert or setTimeout or if I debug via console

I also tried to use deferred and when but it didn't work. Only setTimeout is making it work and I am trying to understand why

var content = $.Deferred();
        content.resolve(framejson($(e.target)));
        $.when(content).done(function(){
            var dfd = $.Deferred();
            saveWebPartProperties(wpId, { Description: content }).done(function () {
                dfd.resolve();
                $(e.target).closest("table").find(".successmessage").show();
            }).fail(self.error);
        });

What is the mistake that is causing this issue?

Answer 1

As you can see in this snippet, this works fine. So I guess your problem isn't in this showed code.

 $(".test").on('click', function(e){ var content = framejson(e.target); console.log(content) }); function framejson(elem){ var listname={}; listname["Name"] = $(elem).closest("table").find(".Name").val(); listname["Length"] = $(elem).closest("table").find(".Length").val(); return JSON.stringify(listname); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td><input class="Name" value="bla" /></td> <td><input class="Length" value="ert" /></td> <td><button class="test">test</button></td> </tr> </table> 

Answer 2

Below code worked,

var wpId=$(e.target).parents().closest(".ms-rtestate-field").parent().attr("webpartid");
        var content = $.Deferred();
        content.resolve(framejson($(e.target)));
        $.when(content).done(function(value){
            var dfd = $.Deferred();
            saveWebPartProperties(wpId, { Description: value }).done(function () {
                dfd.resolve();
                $(e.target).closest("table").find(".successmessage").show();
            }).fail(self.error);
        });

I think the reason is, before the content is returned value from the framejson function, the save part is getting called

I have used deferred and when to resolve this problem. Once the content gets value returned from the function, the rest of the code is getting called for saving it