導航:首頁 > 編程語言 > js避免頻繁點擊

js避免頻繁點擊

發布時間:2024-11-03 15:34:19

㈠ 求js 大神指導,頁面的防止重復點擊事件(具體見補充)

點擊事件里給button標簽加一個自定義屬性,存上次點擊時間

㈡ html、js輪播圖怎麼阻止快速、多次點擊造成的混亂

古老的做法是用settimeout或者setinterval實現循環動畫,但是這樣就會造成題主說的,在且頁面的時候會造成混亂。

因為當頁面失去焦點時瀏覽器不再渲染頁面,但是settimeout/setinterval的請求不會停止,隊列會一直堆積動畫,當頁面再次獲得焦點時動畫隊列早已堆積了大量命令,就會導致動畫混亂。

現在的做法,籠統地說,是使用requestanimationframe函數,用法和settimeout/setinterval類似,只不過requestanimationframe不接受時間參數,函數的執行頻率由瀏覽器的渲染幀數決定,這就實現了由瀏覽器決定動畫隊列,避免了動畫混亂。當然也可以使用一些現成的輪播圖插件,題主可以自己網路,這里對比舉例說明一下settimeout和requestanimationframe的用法。

//用setTimeout實現在控制台循環輸出helloworld
functionfun(){
console.log('helloworld');
setTimeout(function(){
fun();
},3000);
}
fun();//執行fun函數,就可以每隔3000毫秒遞歸的輸出helloworld


//用reqestanimationframe實現在控制台循環輸出helloworld
functionfun(){
console.log('helloworld');
requestAnimationFrame(function(){
fun();
})
}
fun()//執行fun函數,就可以每隔3000毫秒遞歸的輸出helloworld


//requestAnimationFrame沒有時間參數,所以直接使用不能控制間隔
//但我們可以人為的限制執行間隔,方法如下
functionfun(last_time){
if(newDate().getTime()-last_time>3000){
console.log('helloworld');
requestAnimationFrame(function(){
fun(newDate().getTime());
})
}else{
requestAnimationFrame(function(){
fun(last_time)
});
}
}
fun(newDate().getTime())
//這樣就可以為requestAnimationFrame設置間隔,實現每隔3000毫秒輸出helloworld
//抱歉我主寫c副寫python偶爾寫javaweb,分號用的有些亂。

㈢ vue.js怎樣解決按鈕多次點擊重復提交

建議使用ref,給button添加註冊ref引用,然後在表單提交的時候,獲取button按鈕,使其disable置灰。

ref被用來內給元素容或子組件注冊引用信息。引用信息將會注冊在父組件的$refs對象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件。

<divid="app">
<buttonref="mybutton"type="primary"@click="save">保存</button>
</div>
<script>
newVue({
el:"#app",
data:{
},
methods:{
save(){
this.$refs.mybutton.disabled=true;
}
}
})
</script>
<style>
:disabled{
border:1pxsolid#DDD;
background-color:#F5F5F5;
color:#ACA899;
}
</style>

㈣ JS限制點擊事件的頻率怎麼實現

比如:五秒只能點擊一次?

思路:設置一個標記。

varflag=true;
div.addEventListener('click',function(){
if(flag){
alert('點擊事件執行');
flag=false;
setTimeout('flag=true',5000);
}else{
console.log('點擊事件不執行');
}
})

點擊事件執行條件,flag為真。執行之前判斷是否為真,執行之後,flag賦值為false,再緊跟一個定時器,設定五秒後給flag賦值為真。

㈤ js怎麼防止重復點擊

1.防止重復點擊可以添加標記,第一次點擊後變為false,每次點擊判斷這個標記是true才執行

2.如果是按鈕防止重復點擊,可以再按鈕點擊後,給按鈕添加disabled屬性,按鈕就再也點擊不了

舉個例子:

<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<buttononclick="fn()">方式一</button>
<buttononclick="alert('只會出現一次哦,之後想點都點不了');this.disabled=true;">方式二</button>
<body>
<script>
//第一種方式
varflag=true;
functionfn(){
if(flag){
flag=false;
alert('只會出現一次哦');
}
}

</script>

</body>
</html>
閱讀全文

與js避免頻繁點擊相關的資料

熱點內容
htc手機查詢代碼 瀏覽:757
蘋果手機激活碼忘記了怎麼辦 瀏覽:360
如何查看蘋果手機無線密碼 瀏覽:651
從零開始學網站怎麼學 瀏覽:38
qq10個g都是什麼文件 瀏覽:453
江蘇電信免費升級100m 瀏覽:10
哪些app買衣服買鞋 瀏覽:85
安卓最終幻想3隱藏人物 瀏覽:922
怎麼將一大堆圖片放進文件夾 瀏覽:355
net如何控制光碟機刻錄文件 瀏覽:350
未獲取ukey中的數據什麼意思 瀏覽:603
怎麼樣往app上沖錢 瀏覽:394
vb編程中聲明常量的語句是什麼 瀏覽:39
網購網站的廣告怎麼弄 瀏覽:640
word文件怎麼格式化 瀏覽:929
js驗證checkbox是否勾選 瀏覽:991
qq520紅包病毒是真的嗎 瀏覽:875
文件夾里的數字是什麼 瀏覽:118
us數據線怎麼連接車載音樂 瀏覽:320
撥號晶元程序寫入 瀏覽:847

友情鏈接