用高阶函数实现地址的延迟搜索

原文

高阶函数

在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具体是什么。这体现了函数的幂等性。

小结

这样具有幂等性高阶函数虽然初见时可能觉得抽象且难以理解，但其不仅体现了数学上逻辑性，也由于它高度抽象使得基本不会被外部变量影响，可以轻松地写出测试用例，可以重复地用在需要该逻辑的脚本中不易出错。