论坛上有一个用户信息弹出窗口。当您将鼠标悬停在用户名上时,它会显示一个包含用户信息的弹出窗口。我必须推迟一点,因为弹出窗口总是那么快,这很烦人。
弹出链接:
$_uinfo_profile = '<a href="{PROFILE_URL}" onmouseover="show_popup(' . $user_id . ')" onmouseout="close_popup()">{USERNAME}</a>';
有一个文件名为:
ajax_userinfo.html
顶部是弹出窗口处理
显示弹出窗口:
function show_popup(UserID) {
if(http_getuser) {
document.getElementById('popup').style.display='block'; sendRequest(UserID);
}
}
隐藏弹出窗口:
function close_popup() {
document.getElementById('popup').style.display='none';
document.getElementById('ajax_avatar').innerHTML = 'loading...';
document.getElementById('ajax_username').innerHTML = 'loading...';
}
弹出 html:
<div id="popup"> Related popup stuff </div>
我尝试过但没有成功(setTimeout):
$_uinfo_profile = '<a href="{PROFILE_URL}" setTimeout(onmouseover="show_popup(' . $user_id . '),1000)" onmouseout="close_popup()">{USERNAME}</a>';
谢谢
最佳答案
function show_popup(UserID) {
if(http_getuser) {
setTimeout(function(){
document.getElementById('popup').style.display='block';
sendRequest(UserID);
}, 1000);
}
}
并更改此:
$_uinfo_profile = '<a href="{PROFILE_URL}" setTimeout(onmouseover="show_popup(' . $user_id . '),1000)" onmouseout="close_popup()">{USERNAME}</a>';
对此:
$_uinfo_profile = '<a href="{PROFILE_URL}" onmouseover="show_popup(' . $user_id . ')" onmouseout="close_popup()">{USERNAME}</a>';
尽管在这种情况下进行过渡会更好。
另外,请注意:如果用户在不到一秒的时间内离开(当然这是可能的),您将遇到许多错误,因为您的脚本会将 .style.display 设置为 none 但是,由于存在超时, style.display = 'block' 将在此之后执行,因此您可能会因这种延迟而遇到进一步的问题。
我个人强烈建议您使用不同的方式来插入这种延迟,过渡是一种更简单、更高效的解决方案。
编辑:
正如@Xufox所说,您可能希望将setTimeout分配给一个变量并在该变量上使用clearTimeout,在这种情况下您应该执行以下操作:
var timeout;
function show_popup(UserID) {
if(http_getuser) {
timeout = setTimeout(function(){
document.getElementById('popup').style.display='block';
sendRequest(UserID);
}, 1000);
}
}
function close_popup() {
clearTimeout(timeout);
document.getElementById('popup').style.display='none';
document.getElementById('ajax_avatar').innerHTML = 'loading...';
document.getElementById('ajax_username').innerHTML = 'loading...';
}
这样,当调用close_popup()函数时,上面setTimeout内部调用的函数就不会被执行。
关于javascript - 鼠标悬停弹出时有延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28946267/