JavaScript防抖案例讲解

原理

防抖的原理是：你尽管触发事件，但是我一定要在事件触发n秒之后才执行，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n秒后再执行。总之，就是要等到你触发完事件n秒内不再触发事件，我才执行。

案例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: #444;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script src="debounce.js"></script>
</body>
</html>

function getUserAction(e) {
    console.log(this);
    console.log(e);
    container.innerHTML = count++;
};
function debounce(func, wait) {
    var timeout;
    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(this, arguments);    // 解决this和事件对象event
        }, wait);
    }
}
container.onmousemove = debounce(getUserAction, 1000);

到此这篇关于JavaScript防抖案例讲解的文章就介绍到这了,更多相关JavaScript防抖内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Javascript节流函数throttle和防抖函数debounce

    Javascript节流函数throttle和防抖函数debounce

    问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作.资源加载,导致UI停顿甚至浏览器崩溃. 在这样的情况下,我们实际上的需求大多为停止改变大小n毫秒后执行后续处理:而其他事件大多的需求是以一定的频率执行后续处理.针对这两种需求就出现了debounce和throttle两种解决办法. 1. resize事件 2. mousemove事件 3. touchmove事件 4.scroll事件 throttle 与 debounce 在现在很多的javascript框架中都提供了这两

  • JS防抖节流函数的实现与使用场景

    JS防抖节流函数的实现与使用场景

    目录 一.什么是函数防抖 1.为什么需要函数防抖? 2.函数防抖的要点 3.函数防抖的实现 4.函数防抖的使用场景 二.什么是函数节流 1.函数节流的要点 2.函数节流的实现 3.函数节流的使用场景 总结 一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 1.为什么需要函数防抖? 前端开发过程中,有一些事件,常见的例如,onresize,scroll,mousemove ,

  • js节流防抖应用场景,以及在vue中节流防抖的具体实现操作

    故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(debounce),在网上想找个现成的用下,但是好多都不对,于是就自己搞了. 先看看概念 函数防抖(debounce): 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 函数节流(throttle)

  • 如何在面试中手写出javascript节流和防抖函数

    面试的时候我们经常会问别人是理解什么是节流和防抖,严格的可能要求你写出节流和防抖函数,这里我们抛开loadsh工具库手写节流和防抖 1.节流函数throttle // 节流方案1,每delay的时间执行一次,通过开关控制 function throttle(fn, delay, ctx) { let isAvail = true return function () { let args = arguments // 开关打开时,执行任务 if (isAvail) { fn.apply(ctx,

  • 浅谈JavaScript节流和防抖函数

    概念 节流函数 间隔固定的时间执行传入的方法 目的是防止函数执行的频率过快,影响性能.常见于跟滚动,鼠标移动事件绑定的功能. 防抖函数 对于接触过硬件的人也许更好理解,硬件按钮按下时,由于用户按住时间的长短不一,会多次触发电流的波动,加一个防抖函数就会只触发一次,防止了无意义的电流波动引起的问题. 按键防反跳(Debounce)为什么要去抖动呢?机械按键在按下时,并非按下就接触的很好,尤其是有簧片的机械开关,会在接触的瞬间反复的开合多次,直到开关状态完全改变. 应用在前端时,常见的场景是,输入框

  • JavaScript的防抖和节流案例

    JavaScript的防抖和节流案例

    目录 防抖 节流: 防抖:在一定的时间内只执行最后一次任务: 节流:一定的时间内只执行一次: 防抖 <button id="debounce">点我防抖!</button> $('#debounce').on('click', debounce()); function debounce() { let timer; // 闭包 return function () { clearTimeout(timer); timer = setTimeout(() =&g

  • JavaScript 防抖和节流遇见的奇怪问题及解决

    场景 网络上已经存在了大量的有关 防抖 和 节流 的文章,为何吾辈还要再写一篇呢?事实上,防抖和节流,吾辈在使用中发现了一些奇怪的问题,并经过了数次的修改,这里主要分享一下吾辈遇到的问题以及是如何解决的. 为什么要用防抖和节流? 因为某些函数触发/调用的频率过快,吾辈需要手动去限制其执行的频率.例如常见的监听滚动条的事件,如果没有防抖处理的话,并且,每次函数执行花费的时间超过了触发的间隔时间的话 – 页面就会卡顿. 演进 初始实现 我们先实现一个简单的去抖函数 function debounce

  • 如何理解JS函数防抖和函数节流

    概述 函数防抖和函数节流都是定义一个函数,该函数接收一个函数作为参数,并返回一个添加了防抖或节流功能后的函数. 因此可以将函数防抖和函数节流看作是一个函数工厂,负责对传进来的函数进行相应的加工改造,然后产出一个新的带有某种功能的函数. 函数防抖是某一时间内只执行一次,而函数节流是间隔时间执行 假如有这样一个场景:在某一页面,有一个按钮是 "加载更多",这个按钮的作用就是使用 ajax 从后端服务器请求更多的数据展示在页面,我们都知道,ajax 请求的响应是一个异步的,会存在一定的响应时

  • JavaScript防抖案例讲解

    原理 防抖的原理是:你尽管触发事件,但是我一定要在事件触发n秒之后才执行,如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n秒后再执行.总之,就是要等到你触发完事件n秒内不再触发事件,我才执行. 案例 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <meta http-equiv="

  • JavaScript之事件循环案例讲解

    js中的事件循环 因为JavaScript是单线程的,同一事件只能执行一种方法,所以会将程序中的方法加入到执行栈中按照后进先出的顺序依次执行,当遇见异步任务时不会被阻塞,而是将任务放入事件队列中,继续执行执行栈中的同步代码,等当前执行栈中的所有任务都执行完毕则查找事件队列中的任务,并把任务的回调函数放入执行栈中,执行其中的同步代码,如此反复形成的循环被称为事件循环. node.js node.js特点 事件驱动 从上向下执行代码,当遇到需要回调的地方就加入到事件队列中,主线程运行完就去执行事件队

  • JavaScript面向对象之class继承类案例讲解

    JavaScript面向对象之class继承类案例讲解

    1. 面向对象class继承 在上面的章节中我们看到了JavaScript的对象模型是基于原型实现的,特点是简单,缺点是理解起来比传统的类-实例模型要困难,最大的缺点是继承的实现需要编写大量代码,并且需要正确实现原型链. 有没有更简单的写法?有! 我们先回顾用函数实现 Student 的方法: function Student(name) { this.name = name; } // 现在要给这个Student新增一个方法 Student.prototype.hello = function

  • JavaScript数组合并案例讲解

    方法一: var a = [1,2,3]; var b=[4,5] a = a.concat(b); console.log(a); //此处输出为 [1, 2, 3 ,4 ,5] 方法二: // ES5 的写法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); console.log(arr1)//[0,1,2,3,4,5] 方法三: // ES6 的写法 var arr1 =

  • JavaScript navigator.userAgent获取浏览器信息案例讲解

    JavaScript navigator.userAgent获取浏览器信息案例讲解

    浏览器对于我们来说,可能是最熟悉的工具了.熟知的浏览器Firefox.Opera.Safari.IE.Chrome以外,据说世界上还有近百种浏览器.通常在开发的时候要做到兼容各种浏览器,因此提炼出判断浏览器类型及系统是很重要的. 先来看看什么是User-Agent?User-Agent是HTTP请求中的用户标识,一般发送一个能够代表客户端类型的字符串,比如浏览器类型 操作系统等信息.User-Agent 的约定格式是:应用名,跟一个斜线,跟版本号,剩下的是自由的格式. 此处我只实例展示几个浏览器

  • JavaScript 鼠标事件(MouseEvent)案例讲解

    JavaScript 鼠标事件(MouseEvent)案例讲解

    鼠标事件-MouseEvent 当鼠标进行某种操作时,就会生成一个event对象,该对象记录着鼠标触发事件时的所有属性. 可以通过如下方法在google控制台打印出 MouseEvent 对象. function mouseDown(e){ var e = e||event; console.log(e) } window.onload = function (){ document.getElementsByTagName('body')[0].addEventListener('moused

  • CSS3使用过度动画和缓动效果案例讲解

    CSS3使用过度动画和缓动效果案例讲解

    transition过渡: 四个小属性 属性 意义 transition-property 哪些属性要过渡 transition-duration 动画时间 transition-timing-function 动画变化曲线(缓动效果) transition-delay 延迟时间 transition过度属性是CSS3浓墨重彩的特性,过度可以为一个元素在不同样式之间变化自动添加"补间动画" 兼容性IE10开始兼容,移动端兼容良好 曾几何时,网页上的动画特效基本都是由JavaScript

  • php的Snoopy类案例讲解

    php的Snoopy类 获取请求网页里面的所有链接,直接使用fetchlinks就可以,获取所有文本信息使用fetchtext(其内部还是使用正则表达式在进行处理),还有其它较多的功能,如模拟提交表单等. 使用方法: 1.先下载Snoopy类,下载地址:http://sourceforge.net/projects/snoopy/ 2.先实例化一个对象,然后调用相应的方法即可获取抓取的网页信息 示例: include 'snoopy/Snoopy.class.php'; $snoopy = ne

  • javascript兼容性(实例讲解)

    1.事件冒泡: //取消冒泡 if(e.stopPropagation){ e.stopPropagation();//w3c定义的APIbiaozhun }else{ e.cancelBubble=true;//兼容IE 6,7,8浏览器 } 2.获取某个元素的CSS属性值: //获取某个元素的CSS属性值 function getStyle(element,stylename){ if(element.currentStyle){ //IE return element.currentSty

随机推荐