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

時間 2019-11-06

標籤高階函數實現地址延遲搜索简体版

原文原文鏈接

原文javascript

高階函數

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

這對於js初學者來講足夠燒腦，也足夠驚豔。
初識時經常會被被震撼了，原來函數還能夠這麼用java

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

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

地址延遲搜索

對於地址輸入頁面，咱們經常要定位用戶的地址，爲了保證定位的地址是用戶輸入的完整地址，咱們須要對輸入進行延遲處理，用過外賣軟件的你們確定至關熟悉。github

實現這一流程的一種以下：設計模式

`html`

<body>
  <form action="">
    <input type="text" id="content">
    <div id="result"></div>
  </form>
</body>

`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)