Benchmark: jQuery OFF :: Direct off vs. checking if elements exist and then off.

jQuery OFF :: Direct off vs. checking if elements exist and then off. (version: 0)

Comparing performance of: jQuery - direct off. vs jQuery - direct off ~ with event types. vs jQuery - direct off ~ with event types -- but separate lines. vs jQuery - check and switch off -- Element exists. vs jQuery - check and switch off -- Element does not exist. vs jQuery - direct off -- Elements does not exist.

Created: 4 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<ul id="filtration">
    <li id="list-item-1" class="first list">Urval</li>
    <li id="list-item-2" class="list">
        <div class="selectContainer filtration">
            <select id="filterType" class="filtration" multiple="multiple" size="1" autocomplete="off" style="visibility: hidden; ">
                <option value="">Typ</option>
                <option value="Klänningar">Klänningar</option>
                <option value="Byxor" selected="selected">Byxor</option>
                <option value="Toppar">Toppar</option>
            </select>
            <a class="dropdown ischanged"><span class="toggle"></span><span>Byxor</span></a>
            <ul class="DD_values bullets" style="display: none; ">
                <li><a href="#" data-val="Klänningar"><span>Klänningar</span></a></li>
                <li><a href="#" data-val="Byxor" class="selected"><span>Byxor</span></a></li>
                <li><a href="#" data-val="Toppar"><span>Toppar</span></a></li>
            </ul>
        </div>
    </li>
    <li id="list-item-3" class="list">
        <div class="selectContainer filtration">
            <select id="filterColor" class="filtration" multiple="multiple" autocomplete="off" style="visibility: hidden; ">
                <option value="">Färg</option>
                <option value="red">Röd</option>
                <option value="green">Grön</option>
                <option value="blue">Blå</option>
            </select>
            <a class="dropdown"><span class="toggle"></span><span>Färg</span></a>
            <ul class="DD_values bullets" style="display: none; ">
                <li><a href="#" data-val="red"><span>Röd</span></a></li>
                <li><a href="#" data-val="green"><span>Grön</span></a></li>
                <li><a href="#" data-val="blue"><span>Blå</span></a></li>
            </ul>
        </div>
    </li>
    <li id="list-item-3" class="list">
        <div class="selectContainer filtration">
            <select id="filterSize" class="filtration" autocomplete="off" style="visibility: hidden; ">
                <option value="">Storlek</option>
                <option value="XS">XS</option>
                <option value="S">S</option>
                <option value="M">M</option>
                <option value="L">L</option>
                <option value="XL">XL</option>
            </select>
            <a class="dropdown"><span class="toggle"></span><span>Storlek</span></a>
            <ul class="DD_values bullets" style="display: none; ">
                <li><a href="#" data-val="XS"><span>XS</span></a></li>
                <li><a href="#" data-val="S"><span>S</span></a></li>
                <li><a href="#" data-val="M"><span>M</span></a></li>
                <li><a href="#" data-val="L"><span>L</span></a></li>
                <li><a href="#" data-val="XL"><span>XL</span></a></li>
            </ul>
        </div>
    </li>
    <li id="list-item-4" class="sort list">Sortering</li>
    <li id="list-item-5" class="list">
        <div class="selectContainer filtration">
            <select id="sortBy" class="filtration" autocomplete="off" style="visibility: hidden; ">
                <option value="senast" selected="selected">Senast inkommet</option>
                <option value="stigande">Stigande pris</option>
                <option value="fallande">Fallande pris</option>
            </select>
            <a class="dropdown ischanged"><span class="toggle"></span><span>Senast inkommet</span></a>
            <ul class="DD_values bullets" style="display: none; ">
                <li><a href="#" data-val="senast" class="selected"><span>Senast inkommet</span></a></li>
                <li><a href="#" data-val="stigande"><span>Stigande pris</span></a></li>
                <li><a href="#" data-val="fallande"><span>Fallande pris</span></a></li>
            </ul>
        </div>
    </li>
    <li id="list-item-6" class="last list"><a href="" class="clear_filt"><span>Visa</span></a>(50)</li>
</ul>

Script Preparation code:

$parentEl = $('#filtration')
$parentEl.find('.list').on('click.list-click', function(){console.log('clicked')});
$parentEl.find('.list').on('mousedown.list-click', function(){console.log('mousedown')});
$parentEl.find('.list').on('mouseup.list-click', function(){console.log('mouseup')});

Tests:

jQuery - direct off.
$parentEl.find('.list').off();
jQuery - direct off ~ with event types.
$parentEl.find('.list').off('click mousedown mouseup');
jQuery - direct off ~ with event types -- but separate lines.
$parentEl.find('.list').off('click'); $parentEl.find('.list').off('mousedown'); $parentEl.find('.list').off('mouseup');
jQuery - check and switch off -- Element exists.
$parentEl.find('.list').length > 0 && $parentEl.find('.list').off();
jQuery - check and switch off -- Element does not exist.
$parentEl.find('.tessst').length > 0 && $parentEl.find('.tessst').off();
jQuery - direct off -- Elements does not exist.
$parentEl.find('.tessst').off();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery - direct off.
jQuery - direct off ~ with event types.
jQuery - direct off ~ with event types -- but separate lines.
jQuery - check and switch off -- Element exists.
jQuery - check and switch off -- Element does not exist.
jQuery - direct off -- Elements does not exist.

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Related benchmarks: