js防抖的一些疑问解答:为什么addEventListener调用防抖可以，onClick不行

刚学习防抖/节流的时候就一直有一个疑问：为啥addEventListener调用防抖函数可以，但是我再HTML里写onClick方法就不行呢？百思不得其解，后来还是屈服了，用了addEventListener，但是后来学到了vue.....这下不能这么干了（因为vue不建议直接操作dom）懵圈了，在仔细整理闭包后才知道原因：这种防抖函数(生成器)的原理是防抖函数每执行一次返回一个受 time 变量控制的函数！

上代码：

/*** 防抖函数* @param {*} func 回调函数  必传* @param {*} wait 等待时长 默认500ms 可不传*/
export function debounce(func, wait = 500) {let timeOutreturn function () {let content = thislet arg = argumentsif (timeOut) {clearTimeout(timeOut)}timeOut = setTimeout(() => {func.apply(content, arg)}, wait)}
}

原始调用：

  <button id="box" onclick="fangDou(handle, 1000)">点我点我点我</button><script>let box = document.getElementById("box");function handle() {console.log(111);}box.addEventListener("click", debounce(handle, 1000))</script>

这样可以的原因是

addEventListener 后面的 debounce加了个括号，所以它会在解析的时候执行，返回的这个函数作为点击事件的回调函数，没毛病；而 onclick 的回调函数直接就是 debounce，每次点击都只会返回受控的函数，而这个受控的函数没有执行，所以没有反应。

解决的思路：

 <button id="box" onclick="clickHandler()">点我点我点我</button><script>let box = document.getElementById("box");function handle() {console.log(111);}clickHandler = debounce(handle, 500);

在vue中：

<template><div><div class="inputContent"><t-input:style="{'--fonWidth':fonWidth+'px'}"v-model="searchKey"class="inputSearch"clearableplaceholder="搜索内容"></t-input></div></div></template>
<script>
import { debounce } from '../common/util.js'
export default {data () {return {searchKey: '',vm: this,}},watch: {searchKey: function () {this.toDoSth(this)}},methods: {// 调用防抖toDoSth: debounce((vm) => {vm.searchEvent()}, 500),searchEvent () {if (this.searchKey.length) { // 查询} else { // 清空alert()}}}
}
</script>

js防抖的一些疑问解答:为什么addEventListener调用防抖可以，onClick不行相关推荐

IP路由故障关于BGP的疑问解答
IP路由故障关于BGP的疑问解答为什么BGP不能与其聚合路由所属网段的设备建立邻居? 答:如果BGP与其聚合路由所属网段的设备建立邻居,当目标网段的设备或者链路出现故障时,通过聚合路由是无法感知的, ...
百度知道引流有哪些方法？一个互动式的疑问解答
百度知道引流有哪些方法?一个互动式的疑问解答今天主要和大家分享的就是如何利用百度在知道这一个方法引爆精准流量. 百度知道,他就是一个问答的平台,是一个互动式的疑问解答,这么一个平台就是有很多问题,你 ...
发明专利申请疑问解答分享
专利分为发明.实用新型和外观设计三种类型,以下问答专指发明专利. 专利申请疑问解答 1.只有设计方案可以申报专利吗? 2.如果审核通过,申报成功的概率是多大? 3.如果专利申请成功,没有做出相应产品, ...
关于租用香港服务器疑问解答
关于租用香港服务器许多用户还有很多疑问,那么下面由专门做海外服务器租用.托管的RAKsmart机房进行疑问解答. 香港服务器器租用疑问如下: 问题一:租用香港服务器违法吗? 租用香港服务器不违法,国家 ...
BL0942电参数采集模块操作说明及疑问解答
BL0942是一颗内置时钟免校准电能计量芯片,适用于单相多功能电能表.智能插座.智能家电等应用,具有较高的性价比.能够测量有效电压.有效电流.有功功率.有功电能量(用电量)参数.支持通过UART或者S ...
一个想法（续五）：IT联盟创业计划：现阶段进度公示、疑问解答及进行中的计划...
前言: 首先今天是元宵节,先祝大伙元宵节快,单纯的快乐! 然后看看开展中的计划: IT联盟创业计划众筹发起:一个想法(续三):一份IT技术联盟创业计划书,开启众筹创业征程 IT联盟创业计划众筹进度:一 ...
利用js的闭包原理做对象封装及调用方法
创建一个js文件,名为testClosure.js: ? 1 2 3 4 5 6 7 8 9 (function () { function a() { alert('i am a') ...
浅谈js函数三种定义方式四种调用方式调用顺序
在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Li ...
android 实现相机防抖处理,手机拍视频怎么防抖？分享几个好用的防抖技巧，现在学起来不亏...
原标题:手机拍视频怎么防抖?分享几个好用的防抖技巧,现在学起来不亏手机的作用是非常大的,比方说,我们可以用手机来聊天:还可以用手机来看小说:也可以用手机来查资料.当然最最重要的是手机可以用来拍照.拍 ...

js防抖的一些疑问解答:为什么addEventListener调用防抖可以，onClick不行

js防抖的一些疑问解答:为什么addEventListener调用防抖可以，onClick不行相关推荐

最新文章

热门文章