JavaScript：防抖与节流
①防抖：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 2200px;
background-color: pink;
}
</style>
</head> <body>
<div>我是内容部分</div>
<script type="text/javascript">
//防抖：函数只执行最后一次，若时间间隔小于500毫秒，则函数不执行
window.onscroll = debounce(function () {
console.log("调用了1次");
}, 500) function debounce(func, delay = 300) {
var timer
return function () {
var that=this
var args=arguments
clearTimeout(timer)
timer = setTimeout(function(){
func.apply(that,args) //改变定时器中的this指向
},delay)
}
}
</script>
</body> </html>
②节流：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head> <body>
<button>点击</button>
<script>
//节流：函数在一定的时间里只能执行那么几次，点击后等500毫秒触发，只能500毫秒触发一次
var btn = document.getElementsByTagName('button')[0]
btn.onclick = throttle(function () {
console.log(111);
}, 500) function throttle(func, wait) {
var timer
return function () {
var that = this
var args = arguments
if (!timer) {
timer = setTimeout(function () {
timer = null
func.apply(that, args) //改变定时器中的this指向
}, wait)
}
}
}
</script>
</body> </html>
JavaScript：防抖与节流的更多相关文章
- JavaScript 防抖和节流
1. 概述 1.1 说明 在项目过程中,经常会遇到一个按钮被多次点击并且多次调用对应处理函数的问题,而往往我们只需去调用一次处理函数即可.有时也会遇到需要在某一规则内有规律的去触发对应的处理函数,所以 ...
- 来聊聊JavaScript中的防抖和节流
目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...
- 原生JavaScript实现函数的防抖和节流
原生JavaScript实现函数的防抖和节流 参考:https://www.jianshu.com/p/c8b86b09daf0 想详细了解的直接戳上面链接了,讲得非常清楚.下面只给代码和我自己写的注 ...
- 彻底搞懂JavaScript的闭包、防抖跟节流
最近出去面试了一下,收获颇多!!! 以前的我,追求实际,比较追求实用价值,然而最近面试,传说中的面试造火箭,工作拧螺丝,竟然被我遇到了.虽然很多知识点在实际工作中并不经常用到,但人家就是靠这个来筛选人 ...
- JavaScript 中的防抖和节流
什么是防抖 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scrol ...
- javascript之防抖与节流
防抖 你是否在日常开发中遇到一个问题,在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作. 这些需求都可以通过函数防抖动来实现.尤其是第一个需求,如果在频繁的事件回调中做复杂计算,很有可能导 ...
- JavaScript中函数防抖、节流
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14565642.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- js高阶函数应用—函数防抖和节流
高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会 ...
- js防抖和节流
今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面 ...
随机推荐
- 一个Wpf的开发框架
引言 本框架使用Prism做MVVM,优点咱就不说了,主要了容器注入,消息和DI,比自己写省很多事.网上有很多标准的MVVM的使用方法,但是没有形成一个系统级的框架.本框架从登录到具体业务的使用,还有 ...
- iczer的vue-antd-admin项目，逐步平滑迁移mock的url
这个需求,在实战中蛮有用的.但没有看到网上太多文档,就自己hack了一个思路.供指正. 需求 在前后端分离的项目开发中,前后端的开发步骤和进度是不一致的.有时,前端为了不等待后端的API开发进度,会自 ...
- 金九银十已到！掌握这300道java高频面试题，助你面试BAT无忧！
前言 不知不觉已经到了九月了,回首看年初的时候简直像做梦一样.不得不说时间真的是无情一般的流逝,题外话就不多说了!回归正题,现在已经到了今年最后一波大好的跳槽涨薪的时机了,错过了这一次可能你就得等到明 ...
- FL Studio进行侧链的三种方式（下）
在上篇教程中我们了解了在FL Studio中进行侧链的第一种方式,今天我们就来继续带领大家了解进行侧链的另外两种方式. 如何使用 Fruity Peak Controller(果味峰值控制器)在FL ...
- 实现 Application_Start 和 Application_End
理解 ASP.NET Core: 实现 Application_Start 和 Application_End 在 ASP.NET 中两个常用的处理节点是 Application_Start() 和 ...
- kubernetes-dashboard.yaml
# Copyright 2017 The Kubernetes Authors.## Licensed under the Apache License, Version 2.0 (the " ...
- H3CNE（教程）
培训机构提供的ppt,可能也是来自于官方提供,涉及到H3CNE认证考试中的全部知识点,学真技术还得看这个.包括帧中继,哪怕是淘汰了十多年了. https://huxiaoyao.lanzous.com ...
- VisualStudio C++使用汇编函数
Visual Studio编写C++代码使用汇编函数 新建空项目 新建如下源文件 ;test.asm ;测试函数 三个数相加 ;.386 .model flat, c ;public test_ .c ...
- 【译】理解Rust中的局部移动
原文标题:Understanding Partial Moves in Rust 原文链接:https://whileydave.com/2020/11/30/understanding-partia ...
- 03_Service的绑定
Start Service启动的Service,Application退出,Service也不会退出: Bind Service启动的Service,Application退出,Service就会退出 ...