三種方式實現input的keyup延時事件

阿新 • • 發佈：2019-01-14

從事IT兩年了，第一次寫技術文章，之所以一直不敢寫，因為越做這行越感覺自己菜（此處容我做一個悲傷的表情...）

今天做一個keyup的延時事件，對看清楚了，是keyup，不是男性延時！

網上搜了的方法實現有些困難，後來找大神同事幫忙想了幾個辦法出，得以解決。

一、網上找到的方法，當然程式碼是經過簡化的（W3School線上測試程式碼）原文在此：http://blog.csdn.net/qq_30152271/article/details/52536064

<!DOCTYPE html>
<html>
<head>
     <script src="/jquery/jquery-1.11.1.min.js">
     </script>
     <script>
        //全域性變數
	var last;
	//鍵盤彈起事件說明：若使用者1s內沒有其他輸入，則彈出輸入數字
	function keyup(event){
 	     last = event.timeStamp;
	     //得到輸入的值
 	     var s = $("#test").val();
  	     setTimeout(function(){
                 //如果停止輸入1s內沒其他keyup事件發生，則彈窗提示
    		 if(last==event.timeStamp){
alert(s);
    	         }
            },1000);
       }
     </script>
     </head>
     <body>
     <input id="test" onKeyUp="keyup(event)">
     </body>
</html>

總結：上面這個功能經測驗，原網頁是可以實現的，但是，我用的是easyUI，這個框架對控制元件的封裝挺多，

使用上面程式碼時兩個時間戳始終相同，於是不管我鍵盤按得多塊，按幾次，彈幾次....

二、用keyup事件呼叫定時器setTimeout（）;

控制元件程式碼：

<input class="easyui-numberbox" style="width: 80px; margin-bottom: 0px" data-options="required:true,value:0,precision:0,events:{keyup:showDosage}">

js程式碼：

		//初始化條件
		var number = 0;
		//鎖
		var run = false;
		//設定全域性變數儲存輸入陣列
		var kabiaoThesReadNumber ;
		function showDosage(event){
			//第二次讀數
 			kabiaoThesReadNumber = $(this).val();//$("#kabiao_thesReadNumber").numberbox('getValue');
			if(!run){
				time();
			}
			number = 0;
		}
		 function time(){
			 run = true;
			 //定時器
			 setTimeout(function(){
				 if(number==1000){
					 alert("填入讀數："+kabiaoThesReadNumber );
					 run = false;
					 return;
				 }
				 number=number+1000;
				 time();
			 }, 1000)
		 }

總結：這個方法對ezsyUI框架是可以實現的，但過程稍顯複雜，容易出錯，不太推薦使用

三、簡單明朗的方法，利用clearTimeout（x）清除定時器

這個是在百度上搜到的答案，具體過程如下

控制元件程式碼：

<input class="easyui-numberbox" style="width: 80px; margin-bottom: 0px" data-options="required:true,value:0,precision:0,events:{keyup:showDosage}">

js程式碼：

  //全域性變數，儲存定時器
	 var t;
	 function showDosage(event){
		//輸入數字
		var theReadNumber = $(this).val();
		//取消定時器選擇回車和刪除事件（此方法按回車和刪除鍵也會觸發，所以此處需要判斷，當然不同情況有不同判斷，這裡就不一一舉例了）
		if(event.keyCode != 13 && event.keyCode != 8){
			//清除定時器
			clearTimeout(t);
			t = setTimeout(function(){
				alert("當前使用者理論用氣量為："+(theReadNumber-lastReadNumber )+"方");
			},1000);
		}	
	}

總結：第三種發發簡單明朗，值得推薦注：可能是我寫法上有問題，此處esayUI不能用$("#").val()的方式得到完整的值，所以用$(this).val();

三種方式實現input的keyup延時事件

從事IT兩年了，第一次寫技術文章，之所以一直不敢寫，因為越做這行越感覺自己菜（此處容我做一個悲傷的表情...）今天做一個keyup的延時事件，對看清楚了，是keyup，不是男性延時！網上搜了的方法實現有些困難，後來找大神同事幫忙想了幾個辦法出，得以解決。一、網上找到的

三種方式實現觀察者模式及 Spring中的事件編程模型

其中我想訂閱個人 args 我們發送通知當前字段觀察者模式可以說是眾多設計模式中，最容易理解的設計模式之一了，觀察者模式在Spring中也隨處可見，面試的時候，面試官可能會問，嘿，你既然讀過Spring源碼，那你說說Spring中運用的設計模式吧，你可以自信的

詳解Linux搭建vsftp服務器通過三種方式實現文件傳輸

x86 sys fig passwd 問題： mage vpd cee 啟用概述 FTP（File Transfer Protocol）中文稱為“文件傳輸協議”。用於Internet上的控制文件的雙向傳輸。工作原理一、主動模式： 1、客戶端通過用戶名和密碼登錄服務器

WPFの三種方式實現快捷鍵

原文: WPFの三種方式實現快捷鍵最近，對wpf新增快捷鍵的方式進行了整理。主要用到的三種方式如下：一、wpf命令：資源中新增命令 <Window.Resources> <RoutedUICommand x:Key="ToolCapClick" Text

實現執行緒的第三種方式實現Callable介面

package com.juc; import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.FutureTask; /**

三種方式實現java單例

java的單例模式主要分為：餓漢模式和懶漢模式餓漢模式：餓漢很飢餓，所以直接先new出來，再提供。餓漢模式程式碼：載入class檔案的時候就例項化。 package com.jkf.redis; public class HungryManSingleto

三種方式實現遠端restful 介面呼叫

1,基本介紹 Restful介面的呼叫，前端一般使用ajax呼叫，後端可以使用的方法比較多，　　本次介紹三種：　　　　1.HttpURLConnection實現　　　　2.HttpClient實現　　　　3.Spring的RestTemplate 　　　　

以下是JAVA中三種方式實現檔案字元統計

以下是JAVA中三種方式實現檔案字元統計 package com.lyc.gui; import java.io.FileReader; import java.io.IOException; import java.util.HashMap; import java.util.Ha

三種方式實現二維碼（java）

一. 通過使用zxing方式實現： jar準備： https://github.com/zxing/zxing 下載原始碼，將core/src/main/Java/下的所有檔案和javase/src/main/java/下的所有檔案一起打成jar檔案zxing.jar

Android 三種方式實現圓形ImageView

所有方式均繼承了ImageView 圓形圖片實現一：BitmapShader package com.open.widget; import android.content.Context; import android.graphics.Bitmap; impor

vue三種方式實現：全選、反選、全不選

方法一：v-model 與 [{checked:true},…] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

python使用遞迴、尾遞迴、迴圈三種方式實現斐波那契數列

在最開始的時候所有的斐波那契程式碼都是使用遞迴的方式來寫的，遞迴有很多的缺點，執行效率低下，浪費資源，還有可能會造成棧溢位，而遞迴的程式的優點也是很明顯的，就是結構層次很清晰，易於理解可以使用迴圈的方式來取代遞迴，當然也可以使用尾遞迴的方式來實現。

【框架】[Spring]AOP攔截-三種方式實現自動代理

這裡的自動代理，我講的是自動代理bean物件，其實就是在xml中讓我們不用配置代理工廠，也就是不用配置class為org.springframework.aop.framework.ProxyFactoryBean的bean。總結了一下自己目前所學的知識

【Android進度條】三種方式實現自定義圓形進度條ProgressBar

總結了3種方法： 1.多張圖片切換 2.自定義顏色 3.旋轉自定義圖片其它： Android自定義控制元件NumberCircleProgressBar(圓形進度條)的實現：點選開啟連結橫線帶數字進度條：點選開啟連結

三種方式實現：三欄佈局（聖盃佈局，雙飛翼佈局前端面試的佈局問題）

1.float+margin效果如下：html程式碼如下： <div class="main">im center</div> <div class="left">

三種方式實現Android頁面底部導航欄

我們在Android手機上使用新浪微博和QQ等一些軟體時，經常會遇到類似下面這種頁面底部導航欄的控制元件，使用這種導航欄可以在手機螢幕的一頁中顯示儘可能多的內容，如下圖所示：下面我將實現這種導航欄的三種方法總結如下：一、使用TabHost實現（TabHost在新版的A

三種方式實現分散式鎖

方案一：資料庫樂觀鎖樂觀鎖通常實現基於資料版本(version)的記錄機制實現的，比如有一張紅包表（t_bonus），有一個欄位(left_count)記錄禮物的剩餘個數，使用者每領取一個獎品，對應的left_count減1，在併發的情況下如何要保證left_count不為負數，樂觀鎖的實現方式為在紅包表

android三種方式實現自由移動的view

public class MoveView extends ImageView { private int x, y; private int r, l, t, b; public MoveView(Context context) { this(context, n

Thinking in Java---執行緒通訊+三種方式實現生產者消費者問題

前面講過執行緒之間的同步問題；同步問題主要是為了保證對共享資源的併發訪問不會出錯，主要的思想是一次只讓一個執行緒去訪問共享資源，我們是通過加鎖的方法實現。但是有時候我們還需要安排幾個執行緒的執行次序，而在系統內部執行緒的排程是透明的，沒有辦法準確的控制執行緒的切

Android三種方法實現按鈕點選事件

0.我們都知道Java在開發介面的時候，需要使用監聽事件，只有在寫過監聽事件之後才能夠完整的使用軟體，比如說，我們在寫了一個button之後，想點選button，然後在文字標籤中變換字型該怎麼做呢？那麼我們就需要對button這個view進行新增監聽事件，新增完監聽事件之後，

三種方式實現input的keyup延時事件

相關推薦