javaScript 中的冗余事件

Question

我在jQuery中编写了多个函数。

我的客户说，你的JavaScript中目前有冗余事件。请合并应在单个事件中出现的所有代码。

我还在学习jQuery。请帮忙。

谢谢。

'use strict';
$(function() {
	$( '.task-list' ).on( 'click', 'li.list', function() {
		$(this).toggleClass('completed' );
	});
});
$(function() {
	setTimeout(function(){
		$('body').addClass('loaded');
	}, 3000);
});
$(function() {
	$('[data-toggle="tooltip"]').tooltip();
	$('[data-toggle="popover"]').popover();
});
$(function(){
	$('.nav li.dropdown').hover(function() {
		$(this).addClass('open');
	}, function() {
		$(this).removeClass('open');
	});
});

Answer 1

尝试：

'use strict';
$(function() {
    $( '.task-list' ).on( 'click', 'li.list', function() {
        $(this).toggleClass('completed' );
    });
    setTimeout(function(){
        $('body').addClass('loaded');
    }, 3000);
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="popover"]').popover();
    $('.nav li.dropdown').hover(function() {
        $(this).addClass('open');
    }, function() {
        $(this).removeClass('open');
    });
});

您正在使用的$(function() {...})实际上是$(document).ready(function() {...})的简写。此方法允许您在应用 jquery 之前检查文档是否已完全加载。对代码的每个块执行此操作意味着每次添加新侦听器时，这不是您想要的。在此处详细了解对此函数的多次调用。

有关此函数的更多信息，请参阅 JQuery 文档

Answer 2

我认为您应该绑定document.ready事件中的所有事件。

正如jquery官方网站上所说：

在文档"准备就绪"之前，无法安全地操作页面。 jQuery 会为您检测这种就绪状态。其中包含的代码 $（ 文档 ）.ready（） 将只运行一次页面文档对象 模型（DOM）已准备好执行JavaScript代码。

所以做这样的事情：

$( document ).ready(function() {
    //your code goes here 
    //bind the all events and do other stuff
});
or 
$(function(){
    //your code goes here 
    //bind the all events and do other stuff
});

不要重复多次。