underscore.js_使用Underscore.js进行功能反跳

红太狼 2023-02-21 14:30 3阅读 0赞

underscore.js

The ability to listen and react to user interactions with JavaScript is fundamental and incredibly useful. Some interactions happen frequently and some rarely. Some listener functions are light of action, others can be quite taxing on the browser. Take window's resize event for example: the event fires at each step in the resize, so if you have a taxing event listener, your user's browser will get bogged down quickly.

侦听和响应用户与JavaScript交互的能力是基本的，并且非常有用。 一些互动经常发生，而很少发生。 一些侦听器功能行动轻便，而其他功能可能会对浏览器造成很大的负担。 以window的resize事件为例：该事件在调整大小的每一步都会触发，因此，如果您有一个收费事件侦听器，则用户的浏览器将很快陷入瘫痪。

Obviously we can't allow the user's browser to get bogged down, but we can't simply remove listener function either. What we can do, however, is use debouncing to temper the amount of time the method runs. Instead of the listener function firing on each iteration of the resize event, we can ensure it fires only every *n* milliseconds during the resize, allowing our functionality to fire but at a rate so as to not ruin the user's experience. A great utility called [Underscore.js][] provides an easy to use method for easily creating debouncing event listener functions.

显然，我们不能让用户的浏览器陷入困境，但是我们也不能简单地删除侦听器功能。 但是，我们可以做的是使用反跳来调整方法运行的时间。 我们可以确保在调整大小过程中仅每*n*毫秒触发一次监听器函数，而不是在每次调整大小事件的迭代时触发监听器函数，从而允许我们的功能以一定的速率触发，以免破坏用户的体验。 名为[Underscore.js][]的强大实用程序提供了一种易于使用的方法，可轻松创建反跳事件侦听器功能。

## JavaScript **(**The JavaScript**)** ##

Creating a debouncing event listener is as easy as:

创建一个反跳事件监听器很容易：

// Create the listener function
    var updateLayout = _.debounce(function(e) {
    
    	// Does all the layout updating here
    	
    }, 500); // Maximum run of once per 500 milliseconds
    
    // Add the event listener
    window.addEventListener("resize", updateLayout, false);

..because the Underscore.js code underneath the hood manages the interval checks and original listener function calling:

..因为引擎盖下的Underscore.js代码管理间隔检查和原始侦听器函数调用：

// Returns a function, that, as long as it continues to be invoked, will not
    // be triggered. The function will be called after it stops being called for
    // N milliseconds. If `immediate` is passed, trigger the function on the
    // leading edge, instead of the trailing.
    _.debounce = function(func, wait, immediate) {
    	var timeout;
    	return function() {
    		var context = this, args = arguments;
    		var later = function() {
    			timeout = null;
    			if (!immediate) func.apply(context, args);
    		};
    		var callNow = immediate && !timeout;
    		clearTimeout(timeout);
    		timeout = setTimeout(later, wait);
    		if (callNow) func.apply(context, args);
    	};
    };

Not the most complex piece of code but nice that you don't have to write it yourself. The [debounce][] method doesn't rely on any other Underscore.js methods, so you can add this method to a framework like jQuery or MooTools quite easily:

不是最复杂的代码，但是您不必自己编写。 [debounce][]方法不依赖于任何其他Underscore.js方法，因此您可以轻松地将此方法添加到jQuery或MooTools之类的框架中：

// MooTools
    Function.implement({
    	debounce: function(wait, immediate) {
    		var timeout, 
    		    func = this;
    		return function() {
    			var context = this, args = arguments;
    			var later = function() {
    				timeout = null;
    				if (!immediate) func.apply(context, args);
    			};
    			var callNow = immediate && !timeout;
    			clearTimeout(timeout);
    			timeout = setTimeout(later, wait);
    			if (callNow) func.apply(context, args);
    		};
    	}
    });
    
    // Use it!
    window.addEvent("resize", myFn.debounce(500));

As mentioned above, window resize events are the most obvious place to use debouncing, but you could also use them for key events that trigger an autocompleter. I love tiny pieces of code like this that can enhance a site's efficiency so quickly! I also recommend you take a look at Underscore.js and the numerous utility functions it provides -- enrich your existing framework or use it as is!

如上所述，窗口调整大小事件是使用反跳的最明显的地方，但是您也可以将它们用于触发自动完成功能的关键事件。 我喜欢这样的小段代码，它们可以如此Swift地提高网站的效率！ 我还建议您查看Underscore.js及其提供的众多实用程序功能-丰富您现有的框架或按原样使用它！

> 翻译自: [https://davidwalsh.name/function-debounce][https_davidwalsh.name_function-debounce]

underscore.js

[Underscore.js]: http://underscorejs.org/
[debounce]: http://underscorejs.org/#debounce
[https_davidwalsh.name_function-debounce]: https://davidwalsh.name/function-debounce