<!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. Java基础学习（六）-- 递归以及文件I/O流基础详解

    递归 1.递归的概念: 在函数自身内部,调用函数本身的方式,称为递归. 2.递归的注意事项:包括递进去,归出来两步.   即:首先依次执行[函数调自身语句]上半部分的代码,知道最里层.(递进去),然后 ...

  2. RMAN备份脚本

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

  3. Java 调用对象方法的执行过程

    弄清调用对象方法的执行过程十分重要.下面是调用过程的详细描述: 1) 编译器查看对象的声明类型和方法名.假设调用x.f(param),且隐式参数x声明为C类的对象.需要注意的是:有可能存在多个名为f, ...

  4. Codeforces#441 Div.2 四小题

    Codeforces#441 Div.2 四小题 链接 A. Trip For Meal 小熊维尼喜欢吃蜂蜜.他每天要在朋友家享用N次蜂蜜 , 朋友A到B家的距离是 a ,A到C家的距离是b ,B到C ...

  5. CF 986A Fair（多源BFS）

    题目描述 一些公司将在Byteland举办商品交易会(or博览会?).在Byteland有 nnn 个城市,城市间有 mmm 条双向道路.当然,城镇之间两两连通. Byteland生产的货物有 kkk ...

  6. unity 美术注意事项

    有时候美术的一个不小心,就会给程序徒增极大的工作量,所以在项目开始之前是有必要和美术沟通一下,来规范一些东西, 1.将单体模型的轴心置中. 2.模型有父物体时,子物体应相对于父物体的(0,0,0)位置 ...

  7. 【Henu ACM Round#16 E】Paths and Trees

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 感觉很像一道最短路. 然后就试了一发. 结果真的是.. 只要用一个优先队列优化的dijkstra算法求出每个点的最短路上的前一个点是 ...

  8. OC便利方法

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { #if //    从面向对象的角度 ...

  9. Class C++

    为了尽量降低全局变量的使用并提供用户自己定义类型的功能.C++语言提供了一种新的语言机制---类(class).并以类作为构造程序的基本单位 #include<iostream> usin ...

  10. Centos7.4 modsecurity with nginx 安装

    1.准备: 系统环境:Centos7.4 软件及版本: nginx:OpenResty1.13.6.1 ModSecurity:ModSecurity v3.0.0rc1 (Linux) modsec ...