用高階函數實現地址的延遲搜索

Nosee 發布于2019-08-21 11:34 / 2232人閱讀

摘要：原文高階函數在中高階函數實際上就是控制函數的函數，有別于普通函數傳遞變量，高階函數傳遞的是函數，并且輸出函數這對于初學者來說足夠燒腦，也足夠驚艷。初識時常常會被被震撼了，原來函數還可以這么用這是設計模式與開發實踐的單例模式的一個高階函數。

原文

高階函數

在javascript中高階函數實際上就是控制函數的函數，有別于普通函數傳遞變量，高階函數傳遞的是函數，并且輸出函數

這對于js初學者來說足夠燒腦，也足夠驚艷。
初識時常常會被被震撼了，原來函數還可以這么用

var getSingle = function( fn ){
    var result;
    return function(){
        return result || ( result = fn .apply(this, arguments ));
    } 
};

這是《JavaScript設計模式與開發實踐》的單例模式的一個高階函數。

地址延遲搜索

對于地址輸入頁面，我們常常要定位用戶的地址，為了保證定位的地址是用戶輸入的完整地址，我們需要對輸入進行延遲處理，用過外賣軟件的大家肯定相當熟悉。

實現這一流程的一種如下：

html

javascript

var content = document.querySelector("#content")
var result = document.querySelector("#result")
var debounce = function(fn, delay) {
  var timer = null
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  }
}
var fetch = function() {
  // 異步定位
  result.innerHTML = `你搜索的是${content.value}`
}
var search = debounce(fetch, 1500)
content.addEventListener("input", search)

代碼分析 html

html代碼中input用來獲取用戶輸入，div用來展示用戶輸入定位到的地址，實際工作中我們會調用地圖api異步獲取位置信息再展示出來，這里簡化為延遲輸出用戶的輸入

javascript

其中
fetch函數用來實現異步獲取數據的功能
search函數生成具體的延遲1500ms處理的fetch函數
debounce函數用來實現對于fn的延遲處理，它能創建一個函數用來實現：

清除一次的計時器

創建一個新的計時器

這里debounce其實就是一個高階函數，他抽象了一個處理fn的過程，它可以處理任意需要該過程的函數fn而不用在意fn具體是什么。這體現了函數的冪等性。

小結

這樣具有冪等性高階函數雖然初見時可能覺得抽象且難以理解，但其不僅體現了數學上邏輯性，也由于它高度抽象使得基本不會被外部變量影響，可以輕松地寫出測試用例，可以重復地用在需要該邏輯的腳本中不易出錯。

云服務器 GPU云服務器用php實現搜索框高階函數高階函數應用 php搜索界面的實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86858.html

漫談javascript函數式編程

摘要：高階函數不是的所特有的，其他編程語言也有。高階函數面向切面編程面向切面編程這種思想在開發中比較常見，主要就是將一些與核心業務無關的功能抽離出來，比如異常處理，日志統計等。 javascript的函數式語言特性我們知道JavaScript使一門面向對象的編程語言，但這門語言同時擁有很多函數式語言的特性。 JavaScript的設計者在設計最初就參考了LISP方言之一的Scheme，引入...

liaorio 2019-08-22 13:47 評論0 收藏0
JavaScript高階函數的應用

摘要：定義高階函數是指至少滿足下列條件之一的函數函數可以作為參數被傳遞函數可以作為返回值輸出。參考資料設計模式與開發實踐第章高階函數定義高階函數是指至少滿足下列條件之一的函數：函數可以作為參數被傳遞；函數可以作為返回值輸出。 JavaScript語言中的函數顯然滿足高階函數的條件，在實際開發中，無論是將函數當作參數傳遞，還是讓函數的執行結果返回另外一個函數，這兩種情形都有很多應用...

shusen 2019-08-21 17:38 評論0 收藏0
【進階 6-2 期】深入高階函數應用之柯里化

摘要：引言上一節介紹了高階函數的定義，并結合實例說明了使用高階函數和不使用高階函數的情況。我們期望函數輸出，但是實際上調用柯里化函數時，所以調用時就已經執行并輸出了，而不是理想中的返回閉包函數，所以后續調用將會報錯。引言上一節介紹了高階函數的定義，并結合實例說明了使用高階函數和不使用高階函數的情況。后面幾部分將結合實際應用場景介紹高階函數的應用，本節先來聊聊函數柯里化，通過介紹其定義、比較常見的...

stackvoid 2019-05-22 19:25 評論0 收藏0
Javascript高階函數

摘要：判斷數據的類型輸出高階函數實現面向切面編程的主要作用是把一些核心業務邏輯模塊無關的功能抽離出來，這些無關的模塊包括日志統計，安全控制，異常處理。高階函數是指至少滿足以下條件之一的函數：函數可以作為參數被傳遞函數可以作為返回值輸出函數作為參數傳遞把參數當作參數傳遞, 抽離出一部分容易變化的業務邏輯，將它放在函數參數中，這樣可以分離業務代碼中變化與不變的部分。其中一個重要的應...

史占廣 2019-08-23 13:00 評論0 收藏0
JS基礎——高階函數

摘要：定義高階函數是至少滿足下面一個條件的函數接收一個或多個函數作為參數。當然我們也可以通過高階函數來自己實現我們可以通過封裝高階函數來復用和簡化我們的代碼。定義高階函數是至少滿足下面一個條件的函數：1、接收一個或多個函數作為參數。比如filter函數2、返回一個函數。比如bind函數舉個例子：比如我們要篩數組[1,2,3,4,5]中大于3的所有元素，我們通常的實現方法為： let ...

doodlewind 2019-08-23 15:58 評論0 收藏0