Дано:
var element = $('#element');
Мне интересно, что быстрее:
element.click(function(){
element.dosomething()
)}
Или:
element.click(function(){
$(this).dosomething()
)}
Или это имеет значение?
Дано:
var element = $('#element');
Мне интересно, что быстрее:
element.click(function(){
element.dosomething()
)}
Или:
element.click(function(){
$(this).dosomething()
)}
Или это имеет значение?
Используйте element
.
Если element
- это коллекция jQuery, соответствующая одному элементу, например $(
someId )
, просто используйте его.
Если селектор должен был соответствовать более чем одному элементу, тогда element
на самом деле elements
, набор элементов, поэтому в этом случае вы используете $(this)
внутри вашего обработчика кликов, чтобы поймать тот, который был нажат.
Разница объясняется в следующих примерах:
1- Обработчик на одном элементе
var table = $("#myTable");
table.click(function() {
// Same as $(this), except $(this) creates another
// wrapper on the same object (which isn't too expensive anyway)
table.doSomething();
});
2- Обработчик нескольких элементов
var rows = $("#myTable > tbody > tr");
rows.click(function() {
// Here we have to use $(this) to affect ONLY the clicked row
$(this).doSomething();
});
3- Обработчик на одном элементе, но вызываемый для нескольких дочерних элементов
var table = $("#myTable");
// "on" and "live" call handler for only child elements matching selector
// (Even child elements that didn't exist when we added the handler,
as long as parent -table in this case- exists)
table.on("click", "tbody > tr", function() {
// Here we have to use $(this) to affect ONLY the clicked row
$(this).doSomething();
});
Я нахожу это гарантией (и меньше работы, хотя и очень маленькой разницы) только к существующей оболочке, показывая, что я ожидаю один элемент в этом случае, и я просто работаю с ним. И используйте $(this)
, когда я имею дело с элементами коллекции соответствующих элементов.
Скорость, вероятно, будет одинаковой, но использование $(this) намного лучше, потому что вам не нужно беспокоиться о том, что элемент переназначается на что-то еще (или значение элемента полностью теряется).
Кроме того, если вы реорганизуете и используете селектор для класса вместо определенного элемента, функция будет работать для всех согласованных элементов, а не только из них.
Первое быстрее. Второй запускает тот же селектор дважды. Тем не менее, вы будете использовать этот код только с использованием первого метода, скорее всего, это не то, что вы хотите большую часть времени.
На практике используйте шаблон, например:
$('stuff').click(function(){
var $$ = $(this);
$$.dosomething();
$$.dosomethingelse();
)}
То есть, если вы используете только один селектор один раз, сначала назначьте его переменной.
Ну jQuery имеет уникальный кеш элементов dom (который уже был затронут jQuery), поэтому в большинстве случаев это не будет иметь особого значения.
Я действительно не верю, что это ваш случай, хотя jquery фактически обернет это, что является элементом, поэтому вы на самом деле не выполняете какой-либо запрос дважды.
BTW, в некоторых случаях это имеет значение (при делегировании, например).
Я предпочел бы второй. Если вы когда-либо захотели реорганизовать функцию и повторно использовать ее для другой кнопки, она будет более переносимой.
Поскольку $(this) вызывает вызов функции, ваш первый пример теоретически быстрее, но, вероятно, не намного.
Это будет быстрее:
element.click(function(){
element.dosomething();
)}
Это будет быстрее:
element.bind('click', element.dosomething);
Я предполагаю, что element.dosomething()
правильный, а также element
не изменяется.
Вот пример рабочего кода: http://jsfiddle.net/xhS3b/
//<a href="#" id="element">click me</a>
var element = $('#element');
element.dosomething = function () {
alert('did something');
return false;
}
element.bind('click', element.dosomething);