js 防抖函数

第三个参数为是否取消延时

    function debounce (func, wait, immediate) {

      var timeout, result;

      var debounced =  function () {
        var context = this  // 找回this
        var arg = arguments // 找回event对象

        if (timeout) clearTimeout(timeout);

        if (immediate) {
          var callNow = !timeout;

          timeout = setTimeout(function () {
            timeout = false;
          }, wait)

          if (callNow) result = func.apply(context, arg);
        } else {
            timeout = setTimeout(function () {
            result = func.apply(context, arg)
          }, wait)
        }
        return result // 如果函数有返回值
      }

      // 第三个参数设置为true,在等待的时候
      // 我希望立即执行
      // 暴露出去
      debounced.cancel = function () {
        clearTimeout(timeout)
        timeout = false
      }
      return debounced
    }
时间: 2024-11-10 18:58:58

js 防抖函数的相关文章

js防抖函数

一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如果电梯检测到有人进来(触发事件),就会多等待 10 秒,此时如果又有人进来(10秒之内重复触发事件),那么电梯就会再多等待 10 秒.在上述例子中,电梯在检测到有人进入 10 秒钟之后,才会关闭电梯门开始运行,因此,“函数防抖”的关键在于,在 一个事件 发生 一定时间 之后,才执行 特定动作. 二.

js、vue防抖函数、节流函数,工具类封装

防抖函数(可用于防止重复提交) 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次. /** * 防抖函数(可用于防止重复提交) * 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, * 如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数, * 且每次触发函数的间隔

深入理解JS防抖与节流

参考博客:JS防抖和节流,感谢作者的用心分享 日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为debounce(防抖)和throttle(节流) 函数防抖 当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次. function

2019 面试准备 - JS 防抖与节流 (超级 重要!!!!!)

Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 本文涉及知识点: 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 TCP 三次握手与四次挥手 浏览器渲染页面 在本文中,jsliang 会讲解通过自我探索后关于上述知识点的个人理解,如有纰漏.疏忽或者误解,欢迎各位小伙伴留言指出. 如果小伙伴对文章存有疑问,想快速得到回复. 或者小伙伴对 jsliang 个人的前端文档库感兴趣,也想将自己的前端知识整理出来. 欢迎

JS常用函数原理的实现

本文针对目前常见的面试题,实现了相应方法的核心原理,部分边界细节未处理.后续也会持续更新,希望对你有所帮助. 1.实现一个call函数 // 思路:将要改变this指向的方法挂到目标this上执行并返回Function.prototype.mycall = function (context) {  if (typeof this !== 'function') {    throw new TypeError('not funciton')  }  context = context || w

js:深入函数的定义

函数定义方式: 1.function fun1(){alert("fun1");}  //函数就是一个非常特殊的对象,是一个Function的实例,其实在内存中存储的操作是通过一个键值对来存储的. 2.由于函数是一个对象,所以可以通过如下方式定义 var fun2 = fun1;  //通过函数拷贝给fun2完成赋值,但fun1.fun2这两个引用并没有指向同一个对象(虽然他们指向的对象的内容是一样的). fun1 = function(){alert("fun111&quo

对JS中函数的理解

函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能) var fn=function(a){return a+100;} fn=function(a){return a+200;} alert(fn(100)); //300 要访问函数的引用(指针)而不是执行函数时,必须去掉圆括号,加上圆括号表示访问函数执行后的结果 函数体内部的语句在执行时,一旦

js中函数参数值传递和引用传递

js中函数参数值传递和引用传递:在阅读本章节之前建议参阅一下两章节:1.值类型可以参阅javascript的值类型一章节.2.引用类型可以参阅javascript的引用类型一章节.一.函数传递值类型:代码实例如下: function addNum(num) { num+=10; return num; } var num=10; var result=addNum(num); console.log(num); console.log(result); 以上代码的弹出值分别为:10和20,下面进

JS中函数定义的三种格式

第一种:function  fun1(参数1,参数2...){            //通过创建函数名来定义函数 函数体: } 第二种:var fun2=new Function("参数1,参数2...","函数体");         //通过创建变量来定义函数 第三种:function(){                //匿名函数 函数体: } 说明: 1,在调用时,可以为没有参数的函数传递参数:但如果没有传递参数给有参数的函数时,会默认参数为undefi