用高階函數(shù)實(shí)現(xiàn)地址的延遲搜索

Nosee 發(fā)布于2019-08-21 11:34 / 2239人閱讀

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

原文

高階函數(shù)

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

這對(duì)于js初學(xué)者來說足夠燒腦，也足夠驚艷。
初識(shí)時(shí)常常會(huì)被被震撼了，原來函數(shù)還可以這么用

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

這是《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》的單例模式的一個(gè)高階函數(shù)。

地址延遲搜索

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

實(shí)現(xiàn)這一流程的一種如下：

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用來展示用戶輸入定位到的地址，實(shí)際工作中我們會(huì)調(diào)用地圖api異步獲取位置信息再展示出來，這里簡(jiǎn)化為延遲輸出用戶的輸入

javascript

其中
fetch函數(shù)用來實(shí)現(xiàn)異步獲取數(shù)據(jù)的功能
search函數(shù)生成具體的延遲1500ms處理的fetch函數(shù)
debounce函數(shù)用來實(shí)現(xiàn)對(duì)于fn的延遲處理，它能創(chuàng)建一個(gè)函數(shù)用來實(shí)現(xiàn)：

清除一次的計(jì)時(shí)器

創(chuàng)建一個(gè)新的計(jì)時(shí)器

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

小結(jié)

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