react中同一个点击事件中有两个事件,其中一个事件实现防抖?

Question

如题目,我想实现一个input框的onClick功能,click事件中有两个事件,其中一个事件正常触发,另一个事件想做防抖.请问该怎么实现.

Answer 1

var timeout=null
dom.onclick = function () {
    //事件一
    console.log('事件一正常调用');
    //事件二 需要做防抖的
    if (timeout) {
        clearTimeout(timeout);
    }

    timeout = setTimeout(function (e) {
        console.log('处理事件二');
    }, 2000)
}

点击事件点一次事件一就会执行一次，然后事件二是二秒执行执行一次，就是说二秒内点在快，也只是执行一次

Answer 2

click事件里调用另一个事件不就好了

Answer 3

先去看看什么是防抖，看懂了就会了

Answer 4

// 正常事件1
function event1() {
    console.log('event1');
}
// 事件2
function event2() {
    console.log('event2');
}
// 将事件二改为加上防抖 // debounce 是你自己的防抖
const debounceEvent = _.debounce(event2, 1000)

// 点击事件
function onClick() {
    event1();
    debounceEvent();
}

Answer 5

function debounce(fn,delay){
	var timer=null;
	return function(){
		if(timer) clearTimeout(timer);
		timer=setTimeout(()=>{
			fn.apply(this,arguments);
			timer=null;
		},delay)
	}
}


dom.onclick = function () {
    console.log('事件一');
    debounce(()=>console.log('事件二'),2000)();
}

Answer 6

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632