1. 程式人生 > >angularjs input 搜尋框觸發請求太頻繁,使用lodash.js的 debounce節流提高效能

angularjs input 搜尋框觸發請求太頻繁,使用lodash.js的 debounce節流提高效能

由於個人專案是使用angularjs1.3以上,則可以直接使用angularjs 自帶的 ng-model-options="{ debounce: 1000 }"屬性即可

<div ng-controller="Ctrl">
  <form name="userForm">
    Name:
    <input type="text" name="userName"
           ng-model="user.name"
           ng-model-options="{ debounce: 1000 }" />
    <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br />
  </form>
  <pre>user.name = <span ng-bind="user.name"></span></pre>
</div>

以上就可以實現輸入後1000毫秒後觸發,並且連續輸入只取最後一次輸入完才觸發請求

相關推薦

angularjs input 搜尋觸發請求頻繁使用lodash.jsdebounce節流提高效能

由於個人專案是使用angularjs1.3以上,則可以直接使用angularjs 自帶的 ng-model-options="{ debounce: 1000 }"屬性即可 <div ng-controller="Ctrl"> <form name

input搜尋獲取焦點時placeholder消失

/* 點選搜尋框獲取焦點 placeholder消失-開始 */ /* WebKit browsers */ input:focus::-webkit-input-placeholder { color: transparent; /* transparent是全透明黑色(black)的速

Ajax 請求頻繁

伺服器做了兩個優化 CPU 使用率減低 40% 解決方案 核心思路是不論瀏覽器打開了多少視窗,瀏覽器內的所有視窗在單位時間內(15 秒),只能傳送一個請求。怎麼做到呢?利用現代瀏覽器內建的 localStorage 功能可以很容易實現: JS 端使用 localStorage

iOS網路請求頻繁 處理之前傳送的http請求(取消)

搜尋功能在APP中非常的常見,搜尋功能伴隨的往往是實時搜尋結果,極大的方便了使用者的查詢與實時資料的更新,但是也有極大的問題,當我們搜尋框的文字改變的時候,就會進行網路請求,如果輸入特別快的時候,網路請求也會特頻繁,對伺服器的壓力也就更大。 解決方法:在進行新的網路請求的時

input搜尋:根據歷史記錄自動填充後去除預設黃色背景

如果是純色背景,直接通過box-shadow覆蓋即可: input:-webkit-autofill { color: #333!important; -webkit-text-fill-color: #333; box-shadow: 0 0 0 1000px #eaeaea inset

JS編寫input搜尋類似下拉搜尋

因為工作需求,要在一個OA系統嵌入頁面,查詢相關OA系統的jquery版本,是1.4.4,版本過低,沒辦法引用現有的優秀的下拉搜尋框的框架,導致需要自己寫一個簡易的下拉搜尋框。程式碼如下,親測,有效: <!DOCTYPE html> <html lang

bootstrap input 搜尋清空

<divclass="has-feedback"> <labelclass="text-info"for="addressId">輸入地址</label> <

input輸入驗證郵箱,身份證號碼手機號碼(為了加深記憶菜鳥勿噴)

<form action="">   輸入:<input type="text" name="idcard" id="idcard" placeholder="請輸入郵箱">   <input type="button" value="驗證" onclick="chec

input輸入設定type=number時去掉後面的上下按鈕

input type=number時,去掉後面的上下按鈕 在style裡面新增此段程式碼即可 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -w

mui的input輸入輸入完成鍵盤收起input停留在當前頁面

//input 失去焦點讓其留在當前頁面 $("input").blur(function(){             $(this)[0].scrollIntoView(true); }) //監聽鍵盤

JVM FULL GC頻繁CPU佔用率過高問題

一,問題描述    今天上午時候,kafka的一個topic湧上來超過平常值的一堆資料,消費客戶端就開始出現了幾個明顯的問題:       1,首先是ZK連線超時       2,CPU飆升到400% 

input輸入匹配數字(帶兩位小數) js--金額匹配

input輸入框匹配兩位小數的金額,超過部分或者其他非數字和小數點字元不顯示,小數點只能輸入一次,第二次不能輸入,程式碼: <input type="text" onkeyup="checknum(this);"/> <script type

input輸入輸入延時請求(時時搜尋

當input正在獲得焦點時停1s在請求 var timeoutId = 0; $('#id').off('keyup').on('keyup', function

Angularjs搜尋輸入外掛angucomplete-alt使用

最近在使用angularjs開發頁面功能的時候有使用到angucomplete-alt外掛, 在此簡單寫下它的用法: 1)從git上下載它到本地plugins目錄; 2)在jsp頁面中引入angucomplete-alt.js檔案; 3)在宣告app的時候將'angucomplete

回車鍵觸發事件的js程式碼、input輸入值改變事件、js陣列

1、回車鍵觸發事件的js程式碼       在文字框中輸入完內容後,經常需要按回車,焦點跳到下個文字框,或者觸發按鈕事件 判斷是否按下的為回車非常簡單: function EnterPress(){ if(event.keyCode == 13){ ...

jquery實現input輸入實時輸入觸發事件

此文為轉載: [html]view plaincopyprint? <inputid="productName"name="productName"class="wid10"type="text"value=""/> [javasc

input輸入file型別選擇同樣輸入第二次不觸發onchange事件的解決辦法

網上大部分說法是因為選擇一次後onchange事件沒有繫結到input標籤上,解決辦法是拷貝一份input標籤的副本,每次選擇後對原input標籤進行替換.後來發現只需要在選擇一次後將input標籤的value屬性置為空即可,即$('#input').val('

【轉載】jquery實現勾選複選觸發事件給input賦值+回顯複選

JSP: <td class="as1"> <input type="checkbox" name="gdzc" value="1"  id="t0" class="az"/><label for="t0" class="as">商品房</label><

搜尋點選回車鍵觸發搜尋按鈕點選事件

需求:在專案中常會遇到搜尋框,一般情況下搜尋內容輸入完畢後點擊搜尋按鈕來進行相關搜尋,但是使用者已經形成了習慣性,當輸入完成後點選回車鍵來代替點選搜尋按鈕! 實現原理:輸入框點選回車按鈕時觸發搜尋按鈕點選事件 程式碼: $("input").keydown(function

AngularJS學習-(左側導航欄篩選、input輸入篩選)

1、HTML程式碼 <body ng-controller="showProduct"> <!-- 左側導航欄 --> <div class="nav-list"