退出javascript中的回调方法
退出javascript中的回调方法
提问于 2018-02-02 15:09:43
问题:我正在使用康耐视MX-1000扫描条形码.我有三个文本框，我正在尝试扫描条形码并将焦点更改为下一个文本框。但是，在我扫描第三个文本框后，即使焦点放在第一个文本框上，也总是在第三个文本框中输入值。
原因:我的代码无法退出内部设置结果回调函数。下面是我的方法，有人知道如何退出最内部的回调函数吗？
me.scanner.setResultCallback(function (result) { //First callback
var barcode = result.readString;
var txt1 = barcode;
document.getElementById("TextBox1").value = txt1;
document.getElementById("TextBox2").focus();
me.scanner.setResultCallback(function (result) { //Second callback
var barcode = result.readString;
var txt2 = barcode;
document.getElementById("TextBox2").value = txt2;
document.getElementById("TextBox3").focus();
me.scanner.setResultCallback(function (result) { //Third Callback & stuck here!!! I want to exit this function
var barcode = result.readString;
var txt3 = barcode;
document.getElementById("TextBox3").value = txt3;
document.getElementById("TextBox1").focus();
return;
});
return;
});
return;
});回答 3
Stack Overflow用户
回答已采纳
发布于 2018-02-02 15:21:42
这是因为您将回调留给最后一个回调中的第三个字段。以下是解决问题的方法。
me.scanner.setResultCallback(/* Change here -> */ function firstFieldCallback(result) { //First callback
var barcode = result.readString;
var txt1 = barcode;
document.getElementById("TextRec1").value = txt1;
document.getElementById("TextRec2").focus();
me.scanner.setResultCallback(function (result) { //Second callback
var barcode = result.readString;
var txt2 = barcode;
document.getElementById("TextRec2").value = txt2;
document.getElementById("TextRec3").focus();
me.scanner.setResultCallback(function (result) { //Third Callback & stuck here!!! I want to exit this function
var barcode = result.readString;
var txt3 = barcode;
document.getElementById("TextRec3").value = txt3;
document.getElementById("TextRec1").focus();
/* Change here -> */ me.scanner.setResultCallback(firstFieldCallback);
return;
});
return;
});
return;
});Stack Overflow用户
发布于 2018-02-02 15:31:48
问题是您没有重新绑定到您的第一个回调。因为你总是在回调中做同样的事情：
- 求值
- 将值写入当前输入
- 聚焦下一个输入
它可以简化为这样的东西：
var me = {
scanner: {
setResultCallback: function(callback) {
setTimeout(function() {
callback({
readString: Math.floor(Math.random() * 100) + 1
})
}, 1000);
}
}
},
textboxes = ['TextRec1', 'TextRec2', 'TextRec3'],
index = 0;
function readValue(result) {
var barcode = result.readString;
document.getElementById(textboxes[index++]).value = barcode;
index = index === textboxes.length ? 0 : index;
document.getElementById(textboxes[index]).focus();
me.scanner.setResultCallback(readValue);
}
me.scanner.setResultCallback(readValue);<input type="text" id="TextRec1" />
<input type="text" id="TextRec2" />
<input type="text" id="TextRec3" />
不要介意，var me = { ...，我想要一些东西来模拟你描述的行为。
Stack Overflow用户
发布于 2018-02-02 15:40:25
我制作了一个片段来演示如何做到这一点。每个函数都将回调设置为现有函数，而不是创建要将其设置为的新函数。我让它与setInterval一起工作，这样您就可以更好地看到正在发生的事情；您可以看到，每次新的扫描扫描都覆盖下一个框，从而证明焦点环绕在周围。
//Code to make this work in a snippet
var me = {};
me.scanner={};
me.scanner.setResultCallback = function(newcallback){scancallback=newcallback;};
//Set the callback to the first function; each function sets it to the next
me.scanner.setResultCallback(scan1);
//Simulate scanning stuff by manually calling the callback with time intervals; just pretend each time the function is called, it's called naturally by scanning with the scanner
setInterval(function(){
scancallback({randomField:"this is a scan result I guess",readString:Math.floor(Math.random()*10000)});
},1000);
function scan1(scanresult){
//Don't even need the variables, if you need them somehow you can add them back
document.getElementById("TextRec1").value =
scanresult.readString;
document.getElementById("TextRec2").focus();
me.scanner.setResultCallback(scan2);
}
function scan2(scanresult){
//Don't even need the variables, if you need them somehow you can add them back
document.getElementById("TextRec2").value =
scanresult.readString;
document.getElementById("TextRec3").focus();
me.scanner.setResultCallback(scan3);
}
function scan3(scanresult){
//Don't even need the variables, if you need them somehow you can add them back
document.getElementById("TextRec3").value =
scanresult.readString;
document.getElementById("TextRec1").focus();
me.scanner.setResultCallback(scan1);
}<input type="text" id="TextRec1"/>
<input type="text" id="TextRec2"/>
<input type="text" id="TextRec3"/>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48585547
复制相关文章
相似问题
腾讯云开发者
