关于定时器setTimeout()方法的实践--巧解bug

 

 _使用开发环境：UAP；_

 _框架：JQuery、MX；_

  最近的开发的页面中，有一处需要在提交的 datagrid里启用行编辑，就会发生奇怪的bug，编辑过程中如图所示不移开焦点直接点保存，那么已输入的信息就会立刻丢失，保存一个空条目，

 

 

  为此我们几个同事开始研究问题的所在，大家尝试的办法都是使用on动作事件，让点击保存按钮动作生效之前移除鼠标焦点，可是无论是加事件还是直接修改目标状态class都没有效果，最后我想到之前看到的关于Javascript单线程的知识，复原出整个逻辑过程应该是这样的。

  编辑过程中不失去焦点直接点保存，触发点击事件，触发保存按钮回调函数，触发失去焦点事件。（注：不失去焦点的行编辑时，行数据仍视为空）

  应为JS的单线程导致保存的点击事件直接插入了编辑、失去焦点两事件中间，导致保存了个空行。

  这时我想到之前学的定时器，setTimeout的用法，使用定时器可暂时将某事件移除主线程放入任务队列，待主线程所有事件完成后在将任务队列中的挂起事件拿回主线程正常进行。

　　代码如下：

　　me._btnSaveInfo_onclick = function()
　　{
　　　　setTimeout(function(){
　　　　　　var data=me.view.getDataGrid().entityContainer.data;//获取所有的grid数据
　　　　　　for(var i= 0;i<data.length;i++){
　　　　　　data[i].xh= me.view.getDataGrid().$e.find("#"+data[i].id).find("td:first-child").html();
　　　　　　data[i].mbId=me.mbId;
　　　　　　}
　　　　　　var client = new mx.rpc.RESTClient();
　　　　　　client.get(kgxk.mappath("~/rest/tjymbkgxk/savexx"),
　　　　　　　　{data : JSON.stringify(data),
　　　　　　　　}, function(ret) {
　　　　　　　　　　me._refreshDataGrid();
　　　　　　　　});
　　　　},0);
　　};

 这样就可以让程序按照我们的意愿执行了，定时器的妙用，真的是Js的一大利器，哈哈我的这种方法比同事们想的都简洁优雅有效的多。