<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <input type="" name="">

</body>

<script type="text/javascript">
// 当我们不想 input 每次都触发。  而是  当判断input 在最后一次 的时候在触发；

    var inp = document.getElementsByTagName('input')[0];

    inp.addEventListener('input',inp1(500));

    function inp1(delay){

        var time = null;

        return function b(){

            var that = this;

            clearTimeout(time);

            time = setTimeout(function(){

                console.log(112233);

            },delay)

        }

    }

　1.函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
 2.如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
 3.如果计时完毕，没有方法进来访问触发，则执行代码

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

  1. js函数防抖、节流实现

    防抖 Debounce 函数防抖就是,延迟一段时间再执行函数,如果这段时间内又触发了该函数,则延迟重新计算: // 简单实现 function debounce(fn, wait) { let t r ...

  2. 浅谈JS函数防抖及应用场景

    [前言] 在工作中,我们可能碰到这样的问题: 用户在搜索的时候,在不停敲字,如果每敲一个字我们就要调一次接口,接口调用太频繁,给卡住了. 用户在阅读文章的时候,我们需要监听用户滚动到了哪个标题,但是每 ...

  3. JS函数防抖与函数节流

    概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执 ...

  4. js函数防抖和函数节流

    参考链接:https://juejin.im/post/5b651dc15188251aa30c8669 参考链接:https://www.jb51.net/article/158818.htm 在我 ...

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

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

  6. js高阶函数应用—函数防抖和节流

    高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...

  7. 【javascript】js中的函数节流和函数防抖

    一.概念解释  函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段.  大家大概都知道旧款电视机的工作原理,就是一行行得扫描出色彩到屏幕上,然后组成一张张图片.由于肉眼只能分辨出一定频率的变 ...

  8. js函数的节流与防抖

    一.防抖&节流 在前端开发中有一部分用户行为会频繁的触发事件执行,而对于DOM的操作.资源加载等耗费性能的处理,很可能会导致界面卡顿,甚至浏览器奔溃.函数的节流与防抖就是为了解决类似需求而产生 ...

  9. js函数的节流和防抖

    js函数的节流和防抖 用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repai ...

随机推荐

  1. ZoomIt（投影演示辅助软件）下载、安装与运行使用

    下载ZoomIt后,打开即可使用:打开时,你讲看到如下的几个页面,这几个页面是为了介绍每个功能的使用,还可以去设定你觉得比较舒服的快捷键, 默认的是Ctrl+1屏幕放大.Ctrl+2屏幕标注,Ctrl ...

  2. RMAN备份脚本

      单机环境全备   export ORACLE_BASE=/oracle export ORACLE_HOME=$ORACLE_BASE/product/10.2.0/db_1 export ORA ...

  3. NodeJS学习笔记 (28)流操作-stream(ok)

    模块概览 nodejs的核心模块,基本上都是stream的的实例,比如process.stdout.http.clientRequest. 对于大部分的nodejs开发者来说,平常并不会直接用到str ...

  4. 关联Anaconda和最新Pycharm2018.3.2

    在Anaconda和Pycharm 2018.3.2 x64都安装好之后,进行Anaconda 与Pycharm的关联操作 首先File -->New Project 打开以后切记要把Proje ...

  5. dd---复制文件并对原文件的内容进行转换和格式化处理

    dd命令用于复制文件并对原文件的内容进行转换和格式化处理.dd命令功能很强大的,对于一些比较底层的问题,使用dd命令往往可以得到出人意料的效果.用的比较多的还是用dd来备份裸设备.但是不推荐,如果需要 ...

  6. python3 geohash 导入错误及解决

    方法一: pip3 install  python-geohash 方法二: 1.保证 pip3 install geohash 包 2. 进入包的下载目录 /usr/local/lib/python ...

  7. 作诗(si)[分块]

    题目描述 神犇SJY虐完HEOI之后给傻×LYD出了一题: SHY是T国的公主,平时的一大爱好是作诗. 由于时间紧迫,SHY作完诗之后还要虐OI,于是SHY找来一篇长度为N的文章,阅读M次,每次只阅读 ...

  8. python中的类与继承

    Class 类的定义以及实例的建立 Python中,类通过 class 关键字定义. 例如最简单的一个类定义可以为: class Person(object): pass Python 的编程习惯,类 ...

  9. IIS集成和经典配置

    检測到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式).  我们将ASP.NET程序从IIS6移植到IIS7,可能执行提示下面错误: HTTP 错误 500. ...

  10. apiCloud手动检测更新

    有时候需要给用户一个自主的权利,自主检测app是否是最新版本. 如何实现? 1.点击调用接口,检测是否有更新. 默认APICloud会自动检测版本更新,用户也可以在config.xml里配置autoU ...