执行规定一段时间后执行
    <input type="text" id="inp" />
<script>
var oInp = document.getElementById("inp")
var timer = null; function ajax(e) { // 需要执行的函数
console.log(this.value);
}
oInp.oninput = function(e) {
clearTimeout(timer); // 结束上一次的定时器
var _this = this, _argm = arguments
timer = setTimeout(function() { // 1000ms后执行定时器内的事件
ajax.apply(_this, _argm) // 使用apply将this指向到该函数内
}, 1000)
}
</script>

将该功能封装成一个还是

    <input type="text" id="inp" />
<script>
var oInp = document.getElementById("inp")
var timer = null; function ajax(e) { // 需要执行的函数
console.log(this.value, e);
} function debounce(handler, delay) { //封装防抖
var timer = null;
return function() {
var _this = this,
_argm = arguments;
clearTimeout(timer)
timer = setTimeout(function() {
handler.apply(_this, _argm)
}, delay)
}
} oInp.oninput = debounce(ajax, 1000)
 </script>

函数的防抖---js的更多相关文章

  1. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  2. 原生JavaScript实现函数的防抖和节流

    原生JavaScript实现函数的防抖和节流 参考:https://www.jianshu.com/p/c8b86b09daf0 想详细了解的直接戳上面链接了,讲得非常清楚.下面只给代码和我自己写的注 ...

  3. JS高级---案例贪吃蛇,把封装的函数移动到js文件中

    案例贪吃蛇,把封装的函数移动到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. js 函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         函数防抖与节流是做什么的?下面进行通俗的讲解. 本文借鉴:h ...

  5. js面试题之手写节流函数和防抖函数

    函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 /* 节流函数:fn:要被节流的函数,delay:规定的时间 */ function throttle(fn,dela ...

  6. js 函数的防抖(debounce)与节流(throttle)

    原文:函数防抖和节流: 序言: 我们在平时开发的时候,会有很多场景会频繁触发事件,比如说搜索框实时发请求,onmousemove, resize, onscroll等等,有些时候,我们并不能或者不想频 ...

  7. form.submit(回调函数)——引用jq-form.js

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. javascript console 函数详解 js开发调试的利器

    Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中. 使用 alert 不是一样可以显示 ...

  9. JavaScript函数认识,Js中的常见函数

    JavaScript函数: 也称为方法,用来存储一块代码,需要的时候调用. 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数需要包含四要素:返回类型,函数名,参数列表,函数体 拓展: ...

随机推荐

  1. 某小公司RESTful、共用接口、前后端分离、接口约定的实践

    作者:邵磊 juejin.im/post/59eafab36fb9a045076eccc3 前言 随着互联网高速发展,公司对项目开发周期不断缩短,我们面对各种需求,使用原有对接方式,各端已经很难快速应 ...

  2. Git原理入门解析

    前言: 之前听过公司大佬分享过 Git 原理之后就想来自己总结一下,最近一忙起来就拖得久了,本来想塞更多的干货,但是不喜欢拖太久,所以先出一版足够入门的: 一.Git 简介 Git 是当前流行的分布式 ...

  3. C# 英语纠错 LanguageTool

    WPF中,对单词拼写错误,textbox有相应的附加属性可以设置. <TextBox SpellCheck.IsEnabled="True" /> 但是此属性只在WPF ...

  4. dataTable 表插入新行

    DataRow dr = dt.NewRow();//定义新行            dr["sumPrice"] = sumPrice;//对应字段赋值            d ...

  5. Java操作数据库——使用JDBC连接数据库

    Java操作数据库——使用JDBC连接数据库 摘要:本文主要学习了如何使用JDBC连接数据库. 背景 数据持久化 数据持久化就是把数据保存到可掉电式存储设备中以供之后使用.大多数情况下,特别是企业级应 ...

  6. CentOS 7安装配置MySQL 5.7

    概述 前文记录了在Windows系统中安装配置MySQL 5.7(前文连接:https://www.cnblogs.com/Dcl-Snow/p/10513925.html),由于安装部署大数据环境需 ...

  7. 从0系统学Android--2.6 Activity 的最佳实践

    从0系统学Android--2.6 Activity 的最佳实践 本系列文章目录:更多精品文章分类 本系列持续更新中.... 实践中的技巧 2.6.1 知晓当前是在哪个 Activity 这个其实很简 ...

  8. Access denied for user 'root@localhost' (using password:NO)问题的解决

    错误详情: 使用pymysql连接数据库mysql,一直无法连接上, conn = pymysql.connect(host='localhost', port=3306, user='root', ...

  9. SQL Server关于AlwaysOn的理解

    (一)SQL Server-AlwaysOn 技术:SQL Server AlwaysOn 即“全面的高可用性和灾难恢复解决方案” 1.数据库级可用性-只读副本:SQL Server 2012-4个, ...

  10. Linux-3.14.12内存管理笔记【构建内存管理框架(3)】

    此处接前文,分析free_area_init_nodes()函数最后部分,分析其末尾的循环: for_each_online_node(nid) { pg_data_t *pgdat = NODE_D ...