Тестирование поддержки клиента css. Разрывы кода после повторов

Question

Тестирование поддержки клиента css. Разрывы кода после повторов

Я был бы очень благодарен, если бы кто-то еще понял, почему мой код прерывается / бесконечные циклы, когда я запускаю его несколько раз, намеренно приводя к результату "ложь"

Предупреждение, ваш браузер может перестать отвечать на запросы, если вы запустите код с недопустимой / неподдерживаемой поддержкой CSS.

<!DOCTYPE html>
<html>
<body>

<p>Test if a style property is supported by the browser.</p>

<form onsubmit="myFunction(); return false">
<input type="text" id="prop" style="width: 180px;" placeholder="e.g. box-shadow">
<button type="submit">Try it</button>
</form>

<p id="demo"></p>

<script>
String.prototype.isSupported = (function() { 
    var div = document.createElement('div'), 
        vendors = 'khtml ms o moz webkit'.split(' '), 
        len = vendors.length; 

    return function(prop) { 
        prop = this.valueOf(); 
        if(prop in div.style) return true; 
        prop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase(); }); 
        while(len--) { 
            if(vendors[len] + prop in div.style) { return true; } 
        } 
        return false; 
    }; 
}) ();

function myFunction() {
    var input = document.getElementById("prop").value;
    document.getElementById("demo").innerHTML = input.isSupported();
}
</script>

</body>
</html>

1

javascript css prop

Источник

user2856464 24 дек '15 в 05:41

1 ответ

Решение

Другие вопросы по тегам javascript css prop

user3230449 24 дек '15 в 06:24 2015-12-24 06:24 · Accepted Answer · 2015-12-24 06:24

Вам нужно сбрасывать значение len каждый раз, когда вызывается ваша функция isSupported(). Прямо сейчас ваш код предполагает, что вы собираете длину только тогда, когда объявлен метод isSupported(). Итак, после первого вызова ваш цикл while сделал переменную len равной 0. Затем любой последующий вызов еще больше уменьшил переменную len и довел ее до -1, -2 и так далее. В JS минус значения верны. Итак, ваш цикл while застревает. Все, что вам нужно сделать, это сбросить переменную len при вызове функции. Вот фиксированный код: https://jsfiddle.net/f3kpdwu4/4/

String.prototype.isSupported = (function() { 
    var div = document.createElement('div'), 
        vendors = 'khtml ms o moz webkit'.split(' '), 
        len = vendors.length; // it runs only once

    return function(prop) { 
        len = vendors.length; // refresh it on every call
        prop = this.valueOf(); 
        if(prop in div.style) return true; 
        prop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase(); }); 
        while(len--) { 
            if(vendors[len] + prop in div.style) { return true; } 
        } 
        return false; 
    }; 
}) ();