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

Nosee 发布于2019-08-21 11:34 / 2231人阅读

摘要：原文高阶函数在中高阶函数实际上就是控制函数的函数，有别于普通函数传递变量，高阶函数传递的是函数，并且输出函数这对于初学者来说足够烧脑，也足够惊艳。初识时常常会被被震撼了，原来函数还可以这么用这是设计模式与开发实践的单例模式的一个高阶函数。

原文

高阶函数

在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搜索界面的实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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