1. 程式人生 > >關於setTimeout多次點選會多次執行方法導致執行速度加快的問題

關於setTimeout多次點選會多次執行方法導致執行速度加快的問題

有的網友在剛剛入門學習setTimeout這個函式時,往往會拿一些例子進行測試,比如:
<script type="text/javascript">
var num=0;
function numCount(){
	document.getElementById('txt').value=num;
	num=num+1;
	setTimeout("numCount()",1000);
}
</script>
<pre class="html" name="code"><form>
	<input type="text" id="txt" />
	<input type="button" value="Start" onClick="numCount()" />
</form>
這樣寫會產生的一個後果就是:隨著點選次數的增加,數字變化的速率會越來越快,因為你的事件正在一次次覆蓋執行。這時不妨對點選事件進行下限制:
window.onload = function(){
    var num=0;
	var cishu = 0;//判斷函式執行次數
	document.getElementById('start').onclick = function(){
		++ cishu;
		if (cishu < 2) {
			startCount();
		}
	}
    function startCount() {
		document.getElementById('count').value = num;
		num=num+1;
		setTimeout(startCount, 1000);
	}
}
在與clearTimeout結合時,也可以對其進行制約:
	window.onload = function(){
		var num=0;
		var cishu1 = 0;//判斷start點選函式執行次數
		var cishu2 = 1;//判斷stop點選函式執行次數
		var i;//用來傳遞setTimeout

		document.getElementById('start').onclick = function(){
			cishu2 = 0;
			if (cishu1 == cishu2) {
				startCount();
			}
			++ cishu1;
		}
		function startCount() {
			document.getElementById('count').value = num;
			num=num+1;
			i = setTimeout(startCount, 1000);
		}

		document.getElementById('stop').onclick = function(){
			cishu1 = 0;
			if (cishu1 == cishu2) {
				clearTimeout(i);
			}
			++ cishu2;
		}
	}
(ps:本人也在學習中,如上述程式碼有bug或者更簡單的方式,歡迎批評指教)

相關推薦

關於setTimeout執行方法導致執行速度加快的問題

有的網友在剛剛入門學習setTimeout這個函式時,往往會拿一些例子進行測試,比如: <script type="text/javascript"> var num=0; function numCount(){ document.getElementByI

jQuery給一個元素繫結事件前,一觸發的問題所在

如果在給一個元素繫結事件後,再次繫結事件就會出現多次繫結的情況,此時就會出現多次觸發,解決方法我採用的是,在繫結事件前進行解綁,bind繫結的時間用ubbind解綁,其他繫結方法用對應的解綁方法解綁。

Google API 連續按鈕3判斷

            finalstaticint COUNTS = 3;//點選次數        

iOS 防止按鈕造成響應的方法

在日常開發中經常會碰到一種bug就是因為使用者快速點選某個按鈕,導致頁面重複push或者重複傳送網路請求。這樣的問題既對使用者體驗有影響,而且還會一定程度上增加伺服器的壓力。 目前,我為了防止按鈕快速點選主要使用以下兩種辦法 1.在每次點選時先取消之前的操作(網上看到的方

JQuery 2實現2不同的響應

1.toggle方法 $("button").toggle(function(){ alert(1); },function(){ alert(2); }); 在JQuery 1.9 以

android radiogroup 中 某個radiobutton設定不可更改設定 但是有提示 的 方法

1,分兩步,第一步:radbtn_open.setClickable(false);第二步:設定touch事件 radbtn_open.setOnTouchListener(new OnTouchListener()

關於JSP頁面按鈕沒反應,方法沒有執行的檢查

          本人前端知識屬於菜鳥級的,不喜勿噴。。前不久,在除錯一個頁面的時候,點選頁面上的一個按鈕,按鈕繫結的事件並沒有執行。好奇怪,以為是方法名寫錯了,檢查一下完全一樣啊。好鬱悶,網上有說是onclick和onClick的區別,但是還是不行啊。經過一番摸索,原來

android:效果實現

public class MainActivity extends AppCompatActivity{ private final static int COUNTS = 5;//點選次數 private final static long VALIDTIME = 1300;/

淺談一下如何避免使用者造成的請求

淺談一下如何避免使用者多次點選造成的多次請求 我們在訪問有的網站,輸入表單完成以後,單擊提交按鈕進行提交以後,提交按鈕就會變為灰色,使用者不能再單擊第二次,直到重新載入頁面或者跳轉。這樣,可以一定程度上防止使用者重複提交導致應用程式上邏輯錯誤。 還有很多其他的方式進行防止重複點選提交,如

揭祕數字行為:快速地

歡迎訪問網易雲社群,瞭解更多網易技術產品運營經驗。 這是系列文章中的第一篇文章,其中介紹了我們的報告“  揭示數字行為:將資料科學應用於22億使用者會話”中選擇的數字行為 就像有人在商店裡大吼大叫證明商店裡的顧客體驗不佳 - 而且有人微笑 - 一些數字肢體語言表明線上等效

解決vue 按鈕重複提交問題

做專案時通常會遇到點選2次或多次表單按鈕會重複提交資料,解決這個問題,需要將提交按鈕置灰。可以通過disabled控制按鈕的點選和不可點選,下面舉個例子 <Button type="primary" @click="bookok" :disabled="isDisable">確定&l

Android開發之實現事件

 使用Google提供的api中採用的演算法 能夠實現n次點選事件,我們需要定義一個n長度的陣列,每點選一次將數組裡的內容按序號整體向左移動一格,然後給n-1出即陣列的最後添加當前的時間,如果0個位置的時間大於當前時間減去1000毫秒的話,那麼證明在1000毫秒內點選了n次。實現如

fragment中的ImagView+Text條目,ImageView二取樣切換相簿圖片

##Fragmentd的 XML: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android=“http://schemas.and

如何避免Toast後一直提示

一直點選按鈕跳出訊息框半天不消失,使得使用者體驗極差 這時我們需要將Toast的呼叫封裝成一個介面,寫在一個公共的類當中 package com.example.administrator.myapplication; import android.content.Context

工具類:防抖動(極短時間導致介面彈出個dialog)

工具類: public class OnClickUtils {     // 兩次點選按鈕之間的點選間隔不能少於500毫秒     private static final int MIN_CLICK_DELAY_TIME = 500;   &

vue 列表單擊顯示當前列表內容隱藏其他的列表頁,實現顯示隱藏的功能

  1.//class --    sel_div已經把樣式寫好了;通過控制sel_div來控制樣式的展示情況; 2.單擊時,重新給showQA賦值為index;showQA與下標相同時,顯示樣式;同一時間只有一個li滿足條件; 3.當第二次點選時,給一個狀態開關isSta

click事件的累加繫結,一執行

最近在工作上遇到一個點選事件累加的問題,為元素新增點選事件效果,但是總是效果失敗,最後發現點選事件被執行了多次,上網查了一下,下邊就是解決這個問題的幾種思路 $("#adsCollection_tb .contentDel").on("click",function(){ $(

file上傳,資訊儲存在js集合中,不覆蓋上次資訊,js上傳張圖片

頁面只有一個input file按鈕,一個確認上傳按鈕,要求:多次點選上傳,吧圖片資訊儲存入集合,點選確認按鈕,上傳所有圖片 多次點選這一個按鈕上傳圖片,在js中儲存為集合,但是遇到一個問題,當我點選第二次的時候,傳過來的this資訊會頂替掉上一次的this資訊, 也就是:上傳兩次,集合中有

實現只觸發一事件

$('.sumbit1').click(function () { $('.sumbit1').unbind();//在點選事件裡移除觸發事件 var pad = $('input:radio[name=info]:checked').val(); i

Android 控制元件處理方法

描述 在開發Android App時有時給控制元件沒有設定selector,此時當手機反應稍微緩慢一點會使使用者感覺自己點選沒有反應,因此會連著點選多次,但是這會是伺服器壓力增大,做一些重複操作。因此,在此記錄一下防止應用在短時間內多次點選加大伺服器壓力的解決方法 一、在點選事件