添加回调函数时 JavaScript 停止工作

Posted 2023-02-23

【中文标题】添加回调函数时 JavaScript 停止工作

【英文标题】：JavaScript stops working when a call back function is added

【发布时间】：2014-01-02 20:19:53

【问题描述】：

我的网页遇到了一个奇怪的问题。如果被调用的 javascript 函数在其中添加带有回调函数的语句，则附加到 href 的 JavaScript 会被正常调用并停止工作。在这种情况下，即使是作为从 href 调用的 JS 函数中的第一条语句放置的警报也不会触发。

这是一个例子： 跟随工作就好了。

点击此链接时

<a href = "#" onclick="getMyPosition(); return false;">refresh</a>,

following js func 被调用得很好，我看到 both 警告消息表明 getMyPosition() 已执行。注意：此时（即当 js 似乎正在工作时）回调函数（“handleposition”）是 NOT 定义的，但它不会引发任何错误！本身就很奇怪:)

function getMyPosition()  
  alert("it worked 1.");
  if ( navigator.geolocation )
  
    alert("it worked 2.");
    navigator.geolocation.getCurrentPosition(handlePosition, handleError, 
    enabledHighAccuracy: true,
    maximumAge: 60000,
    timeout:    30000
    );
  

现在，如果我在脚本块中添加以下函数，所有功能都将停止工作，并且似乎甚至单击了刷新链接。由于网页上的所有其他内容（包含附加到其他项目的 JavaScript 事件等）都可以正常工作，我的假设是页面上的 JavaSctipt 工作正常。只是这个链接停止调用 onClick 事件上定义的函数。

添加以下回调函数会导致行为就像“刷新”链接甚至没有被点击一样：

function handlePosition(pos)

  alert(pos.coords.latitude);
  alert(pos.coords.longitude);
  window.location.href = "/map?js=y&lat=pos.coords.latitude&lon=pos.coords.longitude";

现在，如果删除此功能，上面显示的 href 链接将再次开始工作，getMyPosition 将被调用，我再次看到警报消息！ 我在页面上没有看到任何脚本错误 IE 11 和 Chrome 都表现出这种行为。 我在 Windows 7 32 位机器上。

【问题讨论】：

你在哪里添加回调？您可以发布损坏场景的完整代码吗？

【参考方案1】：

最大的问题可能是地理定位回调缺少错误处理程序。通过 F12 调出 Chrome 的调试器很快就发现了问题。

添加错误处理程序似乎可以解决问题，但在此过程中我清理了其他一些东西。 Here's a fiddle showing it working

以下是我如何编写链接以在所有浏览器中工作：

<a href="#" onclick="return(getMyPosition())">refresh</a>

这里是句柄位置的修改后的 JS 代码和新的 handleError 例程。

注意添加到主函数中的“return false”：

function getMyPosition() 
    alert("it worked 1.");
    if (navigator.geolocation) 
        alert("it worked 2.");
        navigator.geolocation.getCurrentPosition(handlePosition, handleError, 
            enabledHighAccuracy: true,
            maximumAge: 60000,
            timeout: 30000
        );
    
    return false;


function handlePosition(pos) 
    alert(pos.coords.latitude);
    alert(pos.coords.longitude);
    window.location.href = "/map?js=y&lat=" + pos.coords.latitude + "&lon=" + pos.coords.longitude;


function handleError(error) 
    alert(error);

【讨论】：

谢谢。它成功了。该问题部分与 window.location.href 的地址格式错误有关。我很困惑为什么这个错误会导致整个 JS 块停止工作——包括第一个函数 windows.location.href 还没有被提及。此外，任何地方都没有报告脚本错误。很难调试这种看似奇怪的行为...... :)

不客气。未定义的错误处理程序在调用 getCurrentPosition 时抛出异常；只有在 getCurrentPosition 调用 handlePosition 之后，href 错误才会很明显。

【参考方案2】：

window.location.href = "/map?js=y&lat=pos.coords.latitude&lon=pos.coords.longitude";

应该是：

window.location.href = "/map?js=y&lat=" + pos.coords.latitude + "&lon=" + pos.coords.longitude;

【讨论】：

是的，问题与 window.location.href 的地址格式错误有关。我很困惑为什么这个错误会导致整个 JS 块停止工作——包括第一个函数 windows.location.href 还没有被提及。

【参考方案3】：

把return false;放在getMyPosition函数的最后

【讨论】：

为什么 OP 应该这样做？请说明问题和您的解决方案。

感谢您的回复。我在定义 onClick 的函数调用后返回 false，所以我认为在 getMyPosition 中也不需要它。