首頁(yè) 猿問(wèn) setTimeout這樣用對(duì)么？

setTimeout這樣用對(duì)么？

JavaScript

幕布斯6054654 2019-04-06 16:56:57

$('.menuli').mouseover(function(){ obj=$(this).find('.sub-menu'); t1=setTimeout(function(){obj.slideDown(600)},500); }).mouseout(function(){ t2=setTimeout(function(){obj.slideUp(600)},1500); clearTimeout(t1,t2); });最終我這么寫(xiě)的：$('.menuli').hover(function(){varobj=$(this).find('.sub-menu');t1=setTimeout(function(){obj.slideDown(600)},500); clearTimeout(t2);},function(){varobj=$(this).find('.sub-menu');t2=setTimeout(function(){obj.slideUp(600)},1500); clearTimeout(t1);});由于使用了mouseover和mouseout后導(dǎo)致鼠標(biāo)移動(dòng)到sub-menu上會(huì)自動(dòng)slideUp，用改為hover解決問(wèn)題。由于不clearTimeout導(dǎo)致鼠標(biāo)只要經(jīng)過(guò).menuli上方過(guò)500ms后仍會(huì)執(zhí)行slidedown()這樣容易造成誤操作。lazyboy的答案無(wú)法觸發(fā)下方代碼。故綜合了Frank和lazyboy的答案。第三次修改$('.menuli').hover(function(){varobj=$(this).find('.sub-menu');t1=setTimeout(function(){obj.slideDown(400)},500);},function(){varobj=$(this).find('.sub-menu');obj.slideUp(1000); clearTimeout(t1);});移除了t2的原因是如果從一個(gè).menuli上展開(kāi)了.sub-menu并又移動(dòng)到了另外一個(gè).menuli上，那么會(huì)執(zhí)行clearTimeout(t2)，這樣會(huì)導(dǎo)致前一個(gè)的.sub-menu不會(huì)slideUp。上面代碼是我想到的解決方案，實(shí)在只能放棄t2了，有更好的方法么？新問(wèn)題：鼠標(biāo)如果從.sub-menu移開(kāi)又馬上回來(lái)，能不能取消slideup執(zhí)行并恢復(fù)成.sub-menu展開(kāi)的狀態(tài)

查看完整描述

2 回答

Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

不對(duì)；你的代碼中的幾個(gè)地方不合適：1.obj=$(this).find('.sub-menu');這里聲明了一個(gè)全局變量2.clearTimeout(t1,t2);這里不需要清除我覺(jué)得應(yīng)該這樣$('.menuli').mouseover(function(){varobj=$(this).find('.sub-menu');setTimeout(function(){obj.slideDown(600)},500);}).mouseout(function(){varobj=$(this).find('.sub-menu');setTimeout(function(){obj.slideUp(600)},1500);});

反對(duì) 回復(fù) 2019-04-06

米脂

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊

感覺(jué)更應(yīng)該$('.menuli').mouseover(function(){	clearTimeout(t2);	obj=$(this).find('.sub-menu');	t1=setTimeout(function(){obj.slideDown(600)},500);}).mouseout(function(){	clearTimeout(t1);	obj=$(this).find('.sub-menu');	t2=setTimeout(function(){obj.slideUp(600)},1500);});